通过规则和警报进行 jquery 表单验证答案

【问题标题】：jquery form validation by rules and alert通过规则和警报进行 jquery 表单验证
【发布时间】：2017-05-31 04:52:36
【问题描述】：

我想在验证期间显示警报，但没有解决此问题，
我的代码是：

$(document).ready(function(){
    $('#myform').validate({ 
        rules: {
            name: {
                required: true,
                digits: false
            },
            email: {
                required: true,
                email: true
            },
            pswd: {
                required: true,
                minlength: 5
            },
            cpswd: {
                required: true,
                equalTo: "#pswd"
            },
            agree: "required"
        },
        messages: {
            name: {
                required: "Enter Valid Name",
                digits: "Name contains characters only"
            },
            email: {
                required: "Enter Email",
                email: "Enter Valid Email (i.e. someone@example.com)"
            },
            pswd: {
                required: "Enter Valid Password",
                minlength: "Maximum allowed length is 5 Characters"
            },
            cpswd: "Password not Matched"
        },
        submitHandler: function(form) {
            var name = $("#name").val();
            var email = $("#email").val();
            var pswd =  $("#pswd").val();
            $("#submit").click(function() {
                alert("Data Submitted Successfully!\nName : "+ name +"\nEmail : "+ email +"\nPassword : "+ pswd);
                form.submit();
                return false;
            });
        }
    });
});

此代码将错误显示为文本消息。
我想在警告框中显示错误。
在消息中我会发出警报，例如：

 messages: {
          name: alert('Enter Name')
},

然后它会在页面加载时显示所有警报。

知道怎么做吗？

【问题讨论】：

标签： jquery forms validation

【解决方案1】：

您可以使用errorPlacement: 选项。

First argument: 创建的错误标签为 jQuery 对象。

Second argument：作为 jQuery 对象的无效元素。

errorPlacement: function (error, element) {
        alert(error.text());
    }

注意：部分浏览器会陷入死循环。

【讨论】：

此代码在警告框中显示错误，但是会发生无限循环并且无法在chrome浏览器中关闭警告框。

【解决方案2】：

你可以这样做：

$(document).ready(function () {
    $('#myform').validate({ 
        onclick: false,//add this to your code
        rules: {
            name: "required"
        },
        messages: {
            name: {
                required: "The Name is required!"
            }
        },
        errorPlacement: function (error, element) {
            alert(error.text());
        },
        submitHandler: function (form) { // for demo
            alert('valid form submitted'); // for demo
            return false; // for demo
        }
    });
});

工作JS FIDDLE

【讨论】：