Using jquery validator. validation is not performed when using tab to navigate the form.

Here's the fiddle

$(function () {
         var validator = $("#myForm").validate({ 
             onfocusout: function(element) {
                   this.element(element);
                },
             rules: { 
                 fname: "required", 
                 check: "required",
                 color: "required"
                }, 
             messages: { 
                 fname: "Enter your firstname", 
                 check: "you know you do",
                 color: "pick one!",
             }, 
         }); 
     });

I tried to perform a on blur on the checkbox. However, the event is trigger on form load. Here's the improved fiddle

$('#check').on('blur', function() {
            $("#myForm").validate().element( this );
        }).blur();

Using jquery validator. validation is not performed when using tab to navigate the form.

Here's the fiddle

$(function () {
         var validator = $("#myForm").validate({ 
             onfocusout: function(element) {
                   this.element(element);
                },
             rules: { 
                 fname: "required", 
                 check: "required",
                 color: "required"
                }, 
             messages: { 
                 fname: "Enter your firstname", 
                 check: "you know you do",
                 color: "pick one!",
             }, 
         }); 
     });

I tried to perform a on blur on the checkbox. However, the event is trigger on form load. Here's the improved fiddle

$('#check').on('blur', function() {
            $("#myForm").validate().element( this );
        }).blur();

• javascript
• jquery
• jquery-validate
• validation

3 Answers 3

The solution/work around the onfocusout issue is to use the on blur for both checkbox and radio.

$(function () {
    var validator = $("#myForm").validate({ 
        onfocusout: function(element) {
            this.element(element);
    },
    rules: { 
        fname: "required", 
        check: "required",
        radio: "required",
        color: "required"
    }, 
    messages: { 
        fname: "Enter your firstname", 
        check: "check your checkbox",
        radio: "check your radio",
        color: "pick one!",
    }, 
    }); 

    $('#check').on('blur', function() {
        $("#myForm").validate().element( this );
    });
    $('#radio').on('blur', function() {
        $("#myForm").validate().element( this );
    });
});

Take note that you do not call the blur function like this:

$('#check').on('blur', function() {
    $("#myForm").validate().element( this );
}).blur();

the initial blur function will cause the validation to be trigger on load

Here's the working fiddle

onfocusout does not show error message, otherwise the best way to validate elements on blur is;

onfocusout: function(element) { 
    if( $(element).attr('name') ) { 
            this.element(element);  
    }
}

Check the onfocusout option.

"Validate elements (except checkboxes/radio buttons) on blur. If nothing is entered, all rules are skipped, except when the field was already marked as invalid."

Validate