jQuery - Validate() 并对相似的表单项进行分组

Question

我有一个表单，其中包含三个数字输入字段，分别对应于社会安全号码 XXX-YY-ZZZZ 的 3 个数字部分，例如:

<form id="myForm">
<fieldset>
    <legend>My Sample Form</legend>
    <label><strong>Name:</strong></label><br />
    <input name="name" id="name" />
    <br />
    <label><strong>SSN:</strong></label><br />
    <input name="ssn1" id="ssn1" maxlength="3" size="4">
    <input name="ssn2" id="ssn2" maxlength="2" size="4">
    <input name="ssn3" id="ssn3" maxlength="4" size="4">
    <br />
    <input class="submit" type="submit" value="submit" />
</fieldset>
</form>

当没有社会安全号码时，我的错误消息会显示在每个文本字段之后。有没有办法将这些错误消息分组，以便出现 3 个相邻的文本框，然后只显示一条错误消息？

Answer 1

我不会使用 3 个不同的社会保障号字段，而是使用一个屏蔽为 ###-##-#### 格式的字段。

然后，您可以让单个验证规则点击单个输入框。

jQuery Masked Input Plugin

   $("#ssn").mask("999-99-9999");

这是一个代码示例，使用 SSN 的单个字段以及验证插件和屏蔽输入插件...

<form id="myForm">
<fieldset>
    <legend>My Sample Form</legend>
    <label><strong>Name:</strong></label><br />
    <input name="name" id="name" />
    <br />
    <label><strong>SSN:</strong></label><br />
    <input name="ssn" id="ssn" />
    <br />
    <input class="submit" type="submit" value="submit" />
</fieldset>
</form>

<script language="javascript">
    jQuery(function($) {
        $("#ssn").mask("999-99-9999");
        // validate signup form on keyup and submit
        $("#myForm").validate({
            rules: {
                name: "required",
                ssn: "required",
            },
            messages: {
                name: "Please enter your name!",
                ssn: "Please enter your ssn!"
            }
        });

    });
</script>