jQuery 验证 onblur

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/4622232/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 17:36:00  来源:igfitidea点击:

jQuery validation onblur

jqueryjquery-validateonblur

提问by Diver Dan

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.

我正在尝试在我创建的网页上进行 jQuery 验证。我有大约 6 个不同的字段集,其中包含页面的详细信息。我正在使用它,因为我正在隐藏并向它们展示它们可以提供更好的用户体验。

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.

每当我尝试提交页面和添加单个字符(当文本框需要 2 个或更多字符时)时,我都会让插件按我想要的方式工作,但是我也希望在模糊时进行验证。如果我的用户没有满足验证条件,我想立即通知他们,以便他们可以立即修复它而不必回来。

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

谁能告诉我我需要做什么我正在使用 * http://bassistance.de/jquery-plugins/jquery-plugin-validation/插件。

This is the jQuery code I have written so far:

这是我到目前为止编写的 jQuery 代码:

      $("#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?


有小费吗?

采纳答案by Timothy Ruhle

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

回答by Gabriel

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

回答by Rich Wagenknecht

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

回答by Sahil Jain

Just set on onkeyup = false

只需设置 onkeyup = false

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

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

回答by Mohamed.Abdo

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/

Thia 代码不会在 keyup 上触发验证,但在模糊“失去焦点”时,验证将被触发,一旦用户开始编辑该字段,验证消息就会消失。在此参考上找到更有趣的其他自定义:https: //jqueryvalidation.org/category/plugin/

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

回答by Luiz Fernando Corrêa Leite

try:

尝试:

onkeyup: function (element, event) {

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