jQuery validation onblur

Question

I am trying to get the jQuery validation working on a webpage I am creating. I have about 6 different fieldsets that contain the page's details. I am using this as I am hiding and showing them give a better user experience.

I have the plugin working as I want whenever I try submit the page and whenever I add a single character (when a textbox requires 2 or more characters) however I also want the validation to happen onblur. I want to inform my users straight away if they haven't met the validation condition so they can fix it straight away and don't have to come back.

Can anyone tell me what I need to do I am using the * http://bassistance.de/jquery-plugins/jquery-plugin-validation/ plugin.

This is the jQuery code I have written so far:

      $("#aspnetForm").validate({
            rules: {
            <%=txtFirstName.UniqueID %>:
                {
                    required: true,
                    minlength: 2
                }
                ,
                <%=txtSurname.UniqueID %>:
                {
                    required: true,
                    minlength: 2
                }
                ,
                <%=txtMobileNumber.UniqueID %>:
                {
                    required: true,
                    minlength: 8
                }
                ,
                <%=Email.UniqueID %>:
                {
                    required: true,
                    email: true
                }
                ,
                   <%=ddDay.UniqueID %>:
                {
                    required: true

                }
                ,
                   <%=ddMonth.UniqueID %>:
                {
                    required: true

                }
                ,
                   <%=ddYear.UniqueID %>:
                {
                    required: true

                }
                ,
                <%=txtHouseNumber.UniqueID %>:
                {
                    required: true,
                    minlength:1

                }
                ,
                <%=txtAddress1.UniqueID %>:
                {
                    required: true,
                    minlength:5
                }
                ,
                <%=txtCity.UniqueID %>:
                {
                    required: true,
                    minlength:2
                }
                ,
                <%=txtSuburb.UniqueID %>:
                {
                    required: true,
                    minlength:2
                }
                ,
                <%=txtPostCode.UniqueID %>:
                {
                    required: true,
                    minlength:4,
                    maxlength:4
                }

                 ,
                <%=UserName.UniqueID %>:
                {
                    required: true,
                    minlength:4

                }
                ,
                <%=Password.UniqueID %>:
                {
                    required: true,
                    minlength:4

                }
                ,
                 <%=ConfirmPassword.UniqueID %>:
                {
                   equalTo: "ctl00$ctl00$cpMain$cpLeft$Password"

                }
                  ,
                <%=chkTerms.UniqueID %>:
                {
                    required: true


                }

            },
            messages: {
                <%=txtFirstName.UniqueID %>:
            {
                required: "Please enter your firstname",
                minlength: "Minimum length is 2 characters"
            },
               <%=txtSurname.UniqueID %>:
            {
                required: "Please enter your lastname",
                minlength: "Minimum length is 2 characters"
            },
            <%=txtMobileNumber.UniqueID %>:
            {
                required: "Please enter your mobile",
                minlength: "Minimum length is 8 characters"
            }
            ,
            <%=ddDay.UniqueID %>:
            {
                required: "Please enter your date of birth"

            }
            ,
            <%=txtMobileNumber.UniqueID %>:
            {
                  required: "Please enter your date of birth"
            }
            ,
            <%=txtMobileNumber.UniqueID %>:
            {
                   required: "Please enter your date of birth"
            }
            ,
                  <%=Email.UniqueID %>: 
                  "Please enter a valid email"
            ,
            <%=txtHouseNumber.UniqueID %>:
            {
                   required: "Please enter your house number",
                   minlength:"Please add at least 1 character"
            }

             ,
            <%=txtAddress1.UniqueID %>:
            {
                   required: "Please enter your address",
                   minlength:"Please add at least 5 characters"
            }
            ,
            <%=txtCity.UniqueID %>:
            {
                   required: "Please enter your city",
                   minlength:"Please add at least 2 characters"
            }
            ,
            <%=txtSuburb.UniqueID %>:
            {
                   required: "Please enter your city",
                   minlength:"Please add at least 2 characters"
            }
             ,
            <%=txtPostCode.UniqueID %>:
            {
                   required: "Please enter your postcode",
                   minlength:"Please add the 4 required characters",
                   maxlength:"Only 4 characters are allowed"
            }
             ,
            <%=UserName.UniqueID %>:
            {
                   required: "Please enter your username",
                   minlength: "Please add the 4 required characters"

            }
             ,
            <%=Password.UniqueID %>:
            {
                   required: "Please enter your password",
                   minlength: "Please add the 4 required characters"

            }
             ,
            <%=ConfirmPassword.UniqueID %>:
            {
                  equalTo: "Passwords must match"
             }
            ,
            <%=chkTerms.UniqueID %>:
            {
                   required: "Please agree to the terms"


            }

           }


        });

Any tips?

score 54 · Answer 1 · edited Jan 30 '13 at 16:45

54

Diver Dan was right

$('form').validate({
    onfocusout: function (element) {
        $(element).valid();
    },
    rules: {
        name: 'required',
        from: 'required'

    },
    messages: {
        name: 'Please enter your firstname',
        from: 'Please enter where are you from'
    }
});

edited Jan 30 '13 at 16:45

Nope

22,147
7
47
72

answered Jun 23 '11 at 14:38

Gabriel

1,890
1
17
23

6

I had to add "onkeyup: false," to get the desired behavior – Mike Polen Feb 20 '13 at 21:39
1

Actually, it would be better to use same method that's used within the plugin. So... `this.element(element)` instead of `$(element).valid()`. See: http://stackoverflow.com/a/16205614/594235 – Sparky Apr 08 '15 at 17:44
This gives Uncaught TypeError: validator.settings[eventType].call is not a function – RN Kushwaha Oct 01 '15 at 07:24

score 12 · Accepted Answer · answered Jan 07 '11 at 03:26

12

I can't see anything in the docos that can do that. The only other way i can think of doing it is.

$('#field1, #field2, #field3').blur(function(){
    validator.validate()
});

answered Jan 07 '11 at 03:26

Timothy Ruhle

7,387
10
41
67

Hi Timothy, Cool so I am not going mad. what is validator ? do you mean $("#aspnetForm").validate(); instead of validator.validate() – Diver Dan Jan 07 '11 at 04:11
yea that one. lol my mistake. you can create a validator object(though you are not, and you don't need to). – Timothy Ruhle Jan 07 '11 at 04:34
15

It can be done.......just need to add this onfocusout: function(element) { $(element).valid(); } , works a treat – Diver Dan Jan 07 '11 at 05:35
1

Actually, `onfocusout: function(element) { this.element(element); }` is the best way, as per the plugin's own internal code. – Sparky Apr 08 '15 at 17:46

score 8 · Answer 3 · answered Apr 25 '13 at 02:54

You can also use the element call of the validator.

   $('form').validate({
        onfocusout: function(element) {
           this.element(element);
        },
        rules: {
            name: 'required',
            from: 'required'

        },
        messages: {
            name: 'Please enter your firstname',
            from: 'Please enter where are you from'
        }
    });

score 4 · Answer 4 · answered Aug 25 '14 at 05:33

4

Just set on onkeyup = false

$('form').validate({
    rules: {
        name: 'required',
        from: 'required'

    },
      onkeyup: false
       ,
    messages: {
        name: 'Please enter your firstname',
        from: 'Please enter where are you from'
    }
});

answered Aug 25 '14 at 05:33

Sahil Jain

177
2
11

2

**This is actually the correct answer!** Solved my problem of quick validation. Thanks – TheTechGuy Nov 06 '16 at 10:50

score 0 · Answer 5 · answered May 04 '17 at 13:25

Thia code will not fire validation onkeyup, but on blur "lost focus" the validation will be fire, as will once the user starts to edit the field, validation message will disappear. find more interesting other customization on this ref: https://jqueryvalidation.org/category/plugin/

$('#frm').validate({
            onkeyup: false,
            focusCleanup: true
        });

score 0 · Answer 6 · answered Jun 20 '18 at 16:51

0

try:

onkeyup: function (element, event) {

 $(element).valid();
 // your code
}

answered Jun 20 '18 at 16:51

Luiz Fernando Corrêa Leite

842
1
7
11

jQuery validation onblur

6 Answers6

Linked