0

I am trying to use JQuery Validation plugin on a page where i need to validate a input fields on each row of a table. these input fields doesn't share same name. so i added validation messages to input fields using the addMethod and addClassrules.



    $.validator.addMethod("RequiredFields", $.validator.methods.required, "Required Field");
    $.validator.addMethod("EmailValid", $.validator.methods.email, "Invalid Email");
    $.validator.addClassRules("RequiredFieldValidation", {
        RequiredFields: true
    });
    $.validator.addClassRules("EmailValidation", {
        RequiredFields: true,
        EmailValid: true
    });

    $("#Form1").validate({
        errorPlacement: function (error, element) {
            if (element.parent("td").parent("tr").find('td:last-child').html() == "") {
                element.parent("td").parent("tr").find('td:last-child').html("*");
                error.appendTo(element.parent("td").parent("tr").find('td:last-child'));
            } else {
                element.parent("td").parent("tr").find('td:last-child').append(" and ");
                error.appendTo(element.parent("td").parent("tr").find('td:last-child'));
            }
        },
        errorClass: "ErrorCell",
        validClass: ""

    });

i have added RequiredFieldValidation and EmailValidation as classes to the input fields.

My HTML looks like below.

<pre>
<code>

    <form id="Form1" method="post" runat="server">
        <table id="tbl_Temp">
            <tbody>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Email Address</th>
                    <th class="ErrorCellHeader"></th>
                </tr>
                <tr>
                    <td>
                        <input name="txtFName1_Temp" id="txtFName1_Temp" />
                    </td>
                    <td>
                        <input name="txtLName1_Temp" class="RequiredFieldValidation " id="txtLName1_Temp" />
                    </td>
                    <td>
                        <input name="txtEmail1_Temp" class="EmailValidation" id="txtEmail1_Temp" />
                    </td>
                    <td class="ErrorMessage"></td>
                </tr>
                <tr>
                    <td>
                        <input name="txtFName2_Temp" id="txtFName2_Temp" />
                    </td>
                    <td>
                        <input name="txtLName2_Temp" class="RequiredFieldValidation " id="txtLName2_Temp" />
                    </td>
                    <td>
                        <input name="txtEmail2_Temp" class="EmailValidation" id="txtEmail2_Temp" />
                    </td>
                    <td class="ErrorMessage"></td>
                </tr>
            </tbody>
        </table>
        <input name="btn_submit" id="btn_submit" type="submit" value="Submit" />
    </form>

</code>
</pre>

Everything works fine..except the error messages. i am trying to concatenate messages with "and" but i can't get rid off them when the validation passes.

Any inputs are appreciated.

Demo can be found at JSFiddle

4

1 回答 1

0

引用操作：

“一切正常......除了错误消息。我试图用“和”连接消息，但验证通过后我无法摆脱它们。”

您正在使用errorPlacement回调"and"在消息之间添加字符串。但是，errorPlacement应该只用于定位页面上的label元素。一旦消息label被创建和放置，这个回调就不再有用了。

errorPlacement（默认：在无效元素之后放置错误标签）
类型：Function()
自定义创建的错误标签的位置。第一个参数：作为 jQuery 对象创建的错误标签。第二个参数：作为 jQuery 对象的无效元素。

由于您需要"and"与消息一起“切换”此字符串，因此您需要使用highlight和unhighlight回调函数。它们根据需要直接控制错误消息的切换。

当需要显示错误消息时触发：

highlight（默认值：将 errorClass（参见选项）添加到元素）
类型：Function()
如何突出显示无效字段。覆盖以决定哪些字段以及如何突出显示。

当需要删除错误消息时触发：

unhighlight（默认值：删除errorClass）
类型：Function()
调用以恢复选项highlight 所做的更改，与highlight 相同的参数。

请参阅文档：http: //jqueryvalidation.org/validate/

于 2013-09-27T19:34:39.880 回答