如何仅对一个错误字段

时间:2018-04-03 16:29:04

标签: javascript jquery jquery-validate errorplacement

我正在使用jQuery验证来验证表单。我的表格被分割成几个部分。表单的顶部,具有正常输入,验证错误消息正在按照我想要的方式放置。

我的问题是不会显示放在不同部分的特定错误标签。我被告知尝试使用errorplacement函数,但我不知道如何使用这个函数和一个特定的错误消息。

errorPlacement: function(error, element) {

}

在下面的代码中,您会看到两条HTML条评论。第一个是说明如果我在那里移动输入,那么将显示错误消息。第二个注释是当前输入和我实际需要的位置,但它不会显示在那里。

输入的ID为#interestHidden

有没有人知道如何使用errorplacement来解决这条错误消息?

请参阅下面的代码

<section class="sec90">
            <h3 class="subTC">Enter your information below.</h3>
            <form action="" id="salesforce_submit" method="POST" enctype="multipart/form-data">
                <div><input id="first_name" placeholder="First Name*" class="input block" maxlength="40" name="first_name" type="text"></div>
                <div><input id="last_name" placeholder="Last Name*" class="input block" maxlength="80" name="last_name" type="text"></div>
                <div><input id="company" placeholder="Company*" class="input block" maxlength="40" name="company" type="text"></div>
                <!-- Moving it here will allow the message to display -->
        </section>
        <section class="sec90">
                <h3 class="subTC">What are you interested in?*</h3>
<!-- Moving it here, it doesn't show -->
                <div><input type="hidden" id="interestHidden" name="interestHidden" value=""></div>
                <div id="interestWrap">
                    <div class="interest">

尝试:

errorPlacement: function(error, element) {
            if(element.attr("id") == "interestHidden") {
                error.html('#interestError');
            } else {
                //Placement for other interest Hidden
            }
        },

更新了JS:

$('#salesforce_submit').validate({
        ignore: [],
        //ignore: "",
        rules: {
            first_name: {
                required: true,
                minlength: 2
            },
            last_name: {
                required: true,
                minlength: 2
            },
            email: {
                required: true,
                email: true
            },
            phone: {
                required: true,
                //digits: true,
                minlength: 10,
                alphanumeric: true
            },
            zip: {
                required: true,
                digits: true,
                minlength: 5
            },
            company: {
                required: true,
                minlength: 2
            },
            interestHidden: {
                required: true,
                min: 1
            }
        },
        messages: {
            first_name: {
                required: "Please enter your first name",
                minlength: "Your first name seems a bit short, doesn't it?"
            },
            last_name: {
                required: "Please enter your last name",
                minlength: "Your last name seems a bit short, doesn't it?"
            },
            email: {
                required: "Please enter your email address",
                email: "Please enter a valid email address"
            },
            phone: {
                required: "Please enter your phone number",
                digits: "Please enter a valid phone number with only numbers",
                minlength: "Your number seems a bit short, doesn't it?"
            },
            zip: {
                required: "Please enter your zip code",
                digits: "Please enter a valid zip code with only numbers",
                minlength: "Your zip code seems a bit short, doesn't it?"
            },
            company: {
                required: "Please enter your company name",
                minlength: "Your company name seems a bit short. Please enter at least 2 characters"
            },
            interestHidden: {
                required: "Please choose at least one interest",
                min: "At least one interest needs chosen"
            }
        },
        /*errorPlacement: function(error, element) {
            if(element.attr("id") == "interestHidden") {
                error.html('#interestError');
            } else {
                //Placement for other interest Hidden
            }
        },*/
        errorPlacement: function (error, element) {
            if ($(element).attr('name') == 'interestHidden') {
               // error.insertAfter($(element).next());
               error.insertBefore(element.prev('#interestHidden'));
            } else {
                error.insertAfter(element); // <- default
            }
        },
        submitHandler: function(form) {

0 个答案:

没有答案