Question

我正在尝试在页面上使用JQuery Validation插件，我需要在表的每一行上验证输入字段。这些输入字段不共享相同的名称。所以我使用addMethod和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: ""

    });

我已将RequiredFieldValidation和EmailValidation作为类添加到输入字段中。

我的HTML如下所示。

<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>

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

赞赏任何意见。

演示可以在JSFiddle

找到

Answer 1

引用OP：

“一切正常。除了错误信息。我正在尝试使用“和”连接消息但是当我无法摆脱它们时验证通过。“

您正在使用errorPlacement回调在消息之间添加"and"字符串。但是，errorPlacement仅应用于定位页面上的label元素。创建并放置消息label后，此回调将无法继续使用。

errorPlacement （默认：将错误标签置于无效元素之后）
类型：功能（）
自定义已创建的展示位置错误标签。第一个参数：创建的错误标签为jQuery 宾语。第二个参数：作为jQuery对象的无效元素。

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

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

突出显示（默认：向元素添加errorClass（请参阅选项））
类型：Function（）
如何突出显示无效字段。覆盖以决定哪些字段以及如何突出显示。

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

取消高亮（默认：删除errorClass）
类型：功能（）
调用以恢复由选项突出显示所做的更改，与突出显示相同的参数。

参见文档：http://jqueryvalidation.org/validate/

JqueryValidation插件错误消息问题

1 个答案: