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?

rAm · Accepted Answer · 2014-05-23 07:40:09Z

3

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.

edited May 23, 2014 at 7:40

rAm

3093 silver badges19 bronze badges

answered Jun 11, 2012 at 15:54

tigerFinch

4,0262 gold badges19 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mikefosbrook · Accepted Answer · 2012-05-02 23:23:29Z

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'); 
                } 
            });         
        }
  });
});

Hussein · Accepted Answer · 2011-04-09 06:47:05Z

0

add class"required" to your input so it looks like

<input type="text" class="required" />

This will make the field required and on blur will fire an error if field is left empty.

edited Apr 9, 2011 at 6:47

answered Apr 9, 2011 at 6:40

Hussein

42.9k25 gold badges115 silver badges143 bronze badges

2 Comments

Cofey Over a year ago

Hmm, I already have the required class defined in the input tag, but the error still is not displayed if the field is empty. ANy other ideas?

Cofey Over a year ago

See the plug-in demo page for an example where the error isn't displayed onblur if the field is empty when the input field has an "error" class: jquery.bassistance.de/validate/demo

thecodeparadox · Accepted Answer · 2011-04-09 06:51:13Z

0

Try this :

$('input').blur(function(){
    if($(this).val() == ''){
        alert('Enter something');//here you call your desired process   
    }
});

answered Apr 9, 2011 at 6:51

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

1 Comment

Cofey Over a year ago

Normally, this would be a good solution, but I have many different custom error messages defined in jQuery Validate. Therefore, it needs to work inside the plug-in.

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related