Jquery验证中的警报提示问题

时间:2016-12-20 09:23:14

标签: jquery jquery-validate

我正在使用jQuery验证我的表单。

如果我在没有填写任何内容的情况下提交,则会合并错误消息,并在单个警报提示中显示。

问题出在整合警报之后,它继续说出第一个字段警报,这对用户来说肯定很烦人。你能帮我避免这个吗?

jQuery(".ContactForm").validate({
        ignore: ":hidden",
        rules: {
            Location: {
                required: true
            },
            Program: {
                required: true
            },
            firstname: {
                required: true,
            },
            lastname: {
                required: true,
            },
            zip: {
                required: true,
                checkZipsValue: true,
                minlength: 5
            },
            dayphone: {
                required: true,
                phoneUS: true,
                checkPhoneValue: true
            },
            email: {
                required: true,
                email: true,
                validEmail:true
            }
        },
        messages: {
            Location: "Please select a location.",
            Program: "Please select a program.",
            firstname: "Please enter your first name.",
            lastname: "Please enter your last name.",
            dayphone: "Please enter a valid phone number.",
            zip: "Please enter a valid Zip code.",
            email: "Please enter a valid email.",
        },
        errorPlacement: function (error, element) {
            //alert(error.text());

        },
        showErrors: function(errorMap, errorList) {
        var error = ''; jQuery.each(errorList,function(i, a){error += a.message + "\n";}); if(error.length > 0){window.alert(error);}
    },
});

1 个答案:

答案 0 :(得分:0)

以下代码是在一个警报中显示所有消息,

请注意,chekphonevalue,validemail,checkzipsvalue是您与jquery验证器插件无关的其他方法,所以不要忘记将它添加到验证器中。

<form id="myform" action="#">

    <input type="text" name="Location">
    <input type="text" name="Program">
    <input type="text" name="firstname">
    <input type="text" name="lastname">
    <input type="text" name="zip">
    <input type="text" name="dayphone">
    <input type="text" name="email">

    <input type="submit" value="email">
</form>
<script type="text/javascript">
var errors;
jQuery("#myform").validate({
    onfocusout: false,
    onkeyup: false,
    onclick: false,
    ignore: ":hidden",
    rules: {
        Location: {
            required: true
        },
        Program: {
            required: true
        },
        firstname: {
            required: true,
        },
        lastname: {
            required: true,
        },
        zip: {
            required: true,
            checkZipsValue: true,
            minlength: 5
        },
        dayphone: {
            required: true,
            phoneUS: true,
            checkPhoneValue: true
        },
        email: {
            required: true,
            email: true,
        }
    },
    messages: {
        Location: "Please select a location.",
        Program: "Please select a program.",
        firstname: "Please enter your first name.",
        lastname: "Please enter your last name.",
        dayphone: "Please enter a valid phone number.",
        zip: "Please enter a valid Zip code.",
        email: "Please enter a valid email.",
    },
    showErrors: function(errorMap, errorList) {
        errors="";
        jQuery.each(errorList,function(key,item){
            errors+=item.message+"\n";
        });
        alert(errors);
    },
});
</script>