Empty error summary box displayed with no entries

[ilfrich]

Hi,

I'm using a custom output mode, which highlights form fields with a red border and additionally shows a summary-box above the form with all the error messages in there.

I'm also using Validity with AJAX only. The basic principle is: on form submit validate, if validation fails validate again on every form element change event:

if (validate()) {
// do the Ajax call to the next page
}
else {
$("#form").find('input,select').change(validate);
}

The validate() function triggers $.validity.start(); a couple of validations and $.validity.end(); and returns result.valid.

So far this works flawless when manually filling out the form. On one page I'm using an address suggestions framework, where you have one input field. You start typing your address and when you select an option form a suggestion list, it'll fill all the form elements with the corresponding values (zip code, city, state, ...).

For each form element, where I set the value, I also trigger the change event to trigger the re-validation, which it does. The error messages in the summary box are updated (they disappear one by one).

I've debugged a bit and the last two validations actually return $.validity.end().errors = 0 (so no errors), but I still get an empty summary container displayed (my custom output mode works the same way as the standard summary output mode - especially the end function, so this should happen with the default output mode "summary" as well).

It seems to only happen, when the form is filled by a script instead of a physical user. I was trying to debug and find out why, but somehow I got nowhere. The result is always valid for my last two validations with 0 errors, but it still shows me the summary box.

[ilfrich]

Ha! Just before I gave up, I tried one last thing:

The end function of the summary output mode first hides the container, then checks for buffer.length (which in my case was 0 for the last 2 validations, but even with a check for (buffer.length > 0) it triggered the code inside for the 0 length buffer (according to my console outputs).

So even, if there was no error it triggered $(container).show() - in my case an empty error container.

Now I've wrapped the display section:

if ($(container + " label").size() > 0) {
$(container).show();
}

and it finally works (I'm using s instead of

s).

What I still don't understand is why the buffer might not be empty at the if, but is empty when it iterates to generate the error messages. Could this be a timing/parallelization problem? Because I trigger the validation too quickly the validations overlaps and I'm looking at the wrong buffer?

[whatgoodisaroad]

Sorry about being so late to respond to this. Do you mean that 0 is evaluating as True? That seems very strange!

Perhaps it's related to the way your output is different. For example, in the normal summary output, it deletes all the <LI>s, but you appear to be using <LABEL>s. Maybe if you change...

// Hide the container and empty its summary.
$(container)
    .hide()
    .find("ul")
        .html('');

...to...

// Hide the container and empty its summary.
$(container)
    .hide()
    .html('');

[ilfrich]

Hi, I've tried that. It didn't work.
As I said, it only occurred when I've filled out a form with JS and had a change-event on each input/select, which triggered the entire form validation. So filling out triggered the validation very quickly say 10 times in a row.

I'll try to put together an example.

[whatgoodisaroad]

Oh, I see what you mean! Yes, this is likely related to overlapping validation sessions. Maybe it would be different if, in your input change handler, you called end just before you call start again.

[ilfrich]

You mean blocking the re-validation by some token until the previous validation is finished?
I put together this to demonstrate (I've copied my output method in there).

http://jsfiddle.net/NLZXM/3/
Click Submit to trigger the validation and then "fill out form" to populate values.

[whatgoodisaroad]

Thanks for the example. That's very helpful! I think I've found the problem and I have a fix.

The issue is that the fadeIn function uses an interval, so, sometimes, even though the div has been hidden, the interval to fade it in is still running!

We can fix this by changing line 35 of your JS code to...

$(container).stop().hide().html('');

Adding the call to stop kills the interval for fading in.

This is definitely something that should be present in the normal summary output, so thanks a lot for this catch!

[ilfrich]

Thanks a lot for your help! This finally solves my problem without any dirty code :)

And congrats to this great validation plugin. I've evaluated a couple of them and Validity turned out to be very lightweight and is still very powerful and flexible.