JSF validation onblur causes next field to focus and invalidate?

Question

In JSF 2.0 have the following: Using this as a base

<h:inputText id="email" size="60" label="Email"
            styleClass=" #{component.valid ? '' : 'input-error'}"
            value="#{familyBacking.family.email}" requiredMessage="Required">
            <f:validateRequired />
            <f:attribute name="family" value="#{familyBacking.family}" />
            <f:validator validatorId="EmailValidator" />
            <f:validator validatorId="ExistingEmailAddressValidator" />
            <f:ajax event="blur" onevent="updateFocus"
                render="email emailMessage" />
</h:inputText>

With a javascript function

function updateFocus(obj) {
    jQuery(":input.input-error:first").focus();
}

This has the effect to focus and highlight the invalid field. However, it also allows the person to tab to the next input field. So, the sequence is:

1. User enters no or invalid data into the field clicks on another field or tab.
2. The brower focuses on another field
3. The on blur on the original field fires causing the ajax.
4. The invalidation occurs, and the class is added to the input. The JS function is executed bringing focus back to the invalid field. All is good until this point.
5. BUT, now the onBlur on the 2nd field fires and causes the whole thing again.

Potential Solution:

I can see that the onevent function for the <f:ajax/> is called 3 times. Onces for begin, once for success and once for complete. What I am thinking I can do is somehow disable on blur events for all other input fields until I re-enable them in the last execution of my javascript event.

Suggestions on how I might be able to accomplish this?

Answer 1

I understand that this is disturbing to you, apparently you'd like to show just one message at once. But this is also disturbing to the enduser, the cursor doesn't stick in the next field anymore, the enduser is forced to correct the validation error of the previous field right now and without excuses! Perhaps the enduser wanted some more time to think about the data before filling it in? How would you feel when you encounter such a form? Perhaps you should just not change the focus? Perhaps you should only change the focus to the 1st invalid field whenever the real submit button has been pressed?

Nonetheless, this is an interesting problem. You could indeed hook on the onevent attribute of <f:ajax> to intercept on the status of the ajax request. You could indeed use the jQuery magic to disable (actually, remove) the onblur handler and then add it again when JSF has done its ajax job (and you have done your focus job). You could use jQuery.data() to store and retrieve arbitraty HTML element information such as the original onblur handler (something like as you would do with <f:attribute> in JSF world):

function process(data) {
    switch (data.status) {
        case "begin":
            jQuery(":input", data.source.form).not(data.source).each(function() {
                var $this = $(this);
                $this.data("onblur", $this.attr("onblur"));
                $this.removeAttr("onblur");
            });
            break;

        case "success":
            jQuery(":input.input-error:first").focus();
            jQuery(":input", data.source.form).not(data.source).each(function() {
                var $this = $(this);
                $this.attr('onblur', $this.data("onblur"));
                $this.removeData("onblur");
            });
            break;
    }
}