Jörn , it's hard to extract the code and make it functional just for
jsbin.com
Basically, the validation plug-in APPENDS <span> element that contains
the error message right after the input field. When another message
appears, it appends it again instead of first removing the initial
message.
My workaround is ugly but does the job:
onkeyup: function(element)
{
$(element).next().remove();
},
focusInvalid: false,
invalidHandler: function()
{
$("span").each(function(){ if($(this).attr("class") == "input-
notification error png_bg") { $(this).remove(); } });
},
onfocusout: function(element)
{
$(element).next().remove();
$("span").each(function(){ if($(this).next().attr("class") ==
"input-
notification error png_bg") { $(this).next().remove(); } });
},
This basically shows error messages only when the form is submitted.
When the input field is in focus, it removes the error message. The
onfocusout option removes repeated messages.
I just can't figure out why it would behave this way.
On Dec 16, 8:58 am, Jörn Zaefferer <joern.zaeffe...@googlemail.com>
wrote:
> Could you provide a full example, eg. via jsbin.com?
>
> Jörn
>
> On Wed, Dec 16, 2009 at 2:53 PM, Mark Livingstone
> <namematters...@msn.com>wrote:
>
> > anyone? :)
>
> > On Dec 15, 12:37 pm, Mark Livingstone <namematters...@msn.com> wrote:
> > > Hi,
>
> > > Since I moved to a new design I cannot figure out how to stop the
> > > validate plug-in to append error messages and instead have it remove
> > > the previous error message before creating another one.
>
> > > here is what my HTML code looks like with multiple error messages:
>
> > > <p>
> > > <label for="email">
> > > E-mail
> > > </label>
> > > <input class="text-input medium-input input-notification error
> > > png_bg" name="client[email]" id="email" value="{EMAIL}" size="25">
> > > <span class="errorValidate" generated="true" htmlfor="email">
> > > This field is mandatory
> > > </span>
> > > <span class="errorValidate" generated="true" htmlfor="email">
> > > This field is mandatory
> > > </span>
> > > <span class="errorValidate" generated="true" htmlfor="email">
> > > This field is mandatory
> > > </span>
> > > <span class="errorValidate" generated="true" htmlfor="email">
> > > This field is mandatory
> > > </span>
> > > <span class="errorValidate" generated="true" htmlfor="email">
> > > Please enter a valid e-mail address
> > > </span>
> > > </p>
>
> > > CSS:
>
> > > .errorValidate {
> > > padding: 2px 0 2px 22px;
> > > margin: 0 0 0 5px;
> > > }
>
> > > JS:
>
> > > var validateForm = $("#clientUpdateForm").validate(
> > > {
> > > errorClass: "errorValidate",
> > > /etc/...
>
> > > }
>
> > > Any ideas why it would do that?
>
> > > Thanks in advance!
