How to display error onblur when a field is empty using jQuery Validate?

Question

I'm using jQuery Validate to validate a form. The onfocusout parameter is set to true, however it says this:

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.

I cannot find anyway to make it so if the user clicks inside the field and doesn't enter anything then the error message will be displayed and the field would be highlighted in red.

The only way it will display the error if the field is empty is if I enter text, then delete it. I need it to show the error if I click inside it then click out without entering anything at all.

Can someone tell me how to do this?

Solution 1

The plugin in question has a function specifically to run validation immediately on one particular element called 'element.' You can use this within the onfocusout function to force validation of that particular element.

Example:

$('form').validate({
    onfocusout: function(e) {
        this.element(e);
    }
});

See jsfiddle demo.

Solution 2

I came to this post after I encountered the same issue filling out, then clearing a required form field. I was using an example merging twitter bootstrap form mark up with jquery.validate.js found here: http://alittlecode.com/jquery-form-validation-with-styles-from-twitter-bootstrap/

I solved it using the following code:

onfocusout: function(label) {
        if($(label).val() == ''){
            $(label).closest('.control-group').removeClass('success'); 
        }
    }

Here's the full script in context:

$(document).ready(function() {
    $('#contact_form').validate({
    rules: {
      name: {
        minlength: 2,
        required: true
      },
      email: {
        required: true,
        email: true
      },
      message: {
        minlength: 2,
        required: true
      }
    },
    onfocusout: function(label) {
        if($(label).val() == ''){
            $(label).closest('.control-group').removeClass('success'); 
        }
    },
    highlight: function(label) {
        $(label).closest('.control-group').addClass('error');
    },
    success: function(label) {
        label
            .text('OK!').addClass('valid')
            .closest('.control-group').addClass('success');
    },
    submitHandler: function(form) {
            $(form).ajaxSubmit({
                target: '#success', 
                success: function() { 
                    $('#contact_form_wrapper').hide();
                    $('#success').html('<h3>Thank you for your enquiry</h3><p class="intro-text">We will endeavour to respond to your message within 72 hours.</p>').fadeIn('slow'); 
                } 
            });         
        }
  });
});