jQuery 验证：分两部分验证表单

Question

我想分两部分验证一个表单，当我单击 btn 按钮时验证正确完成，但是当我单击 btnn 时它不起作用并始终验证字段 1

这是我的代码

jQuery:

$(document).ready(function() {
    $("#form1").validate({
        rules: {
            field1: "required"
        },
        messages: {
            field1: "Please specify your name"

        }
    })

    $('#btn').click(function() {
        $("#form1").valid();
    });
    $("#form1").validate({
        rules: {
            field2: "required"
        },
        messages: {
            field2: "Please specify your name"

        }
    })

    $('#btnn').click(function() {
        $("#form1").valid();
    });
});

HTML

<form id="form1" name="form1"> 
    Field 1: <input name="field1" type="text" />
     Field 2: <input name="field2" type="text" />
</form>

<div>
    <input id="btn" type="button" value="Validate"/>
    <input id="btnn" type="button" value="Validate"/>
</div>

有什么建议吗？

Answer 1

根据设计，您不能在同一个表单上调用 .validate() 方法两次。 .validate() 方法用于初始化，第二个实例将始终被忽略。

这里有两个选择：

将第 2 部分放入其自己的 <form> 容器中。

或

一些其他技巧，如 showing/hiding 表单字段，或使用 .rules() 方法根据单击哪个按钮动态地 add/remove 规则。如果您是 showing/hiding 这些字段，则在 .validate() 的同一实例中声明所有规则并利用此插件的默认行为，即忽略所有隐藏字段。

既然你没有透露你的multi-part form的工作原理，或者想要分两部分验证的目的，我给你展示一个最简单的方案，也就是建议#1。

jQuery:

$(document).ready(function() {

    $("#form1").validate({ // initialize `form1`
        rules: {
            field1: "required"
        },
        messages: {
            field1: "Please specify your name"
        }
    });

    $('#btn').click(function() {
        $("#form1").valid();
    });

    $("#form2").validate({ // initialize `form2`
        rules: {
            field2: "required"
        },
        messages: {
            field2: "Please specify your name"
        }
    });

    $('#btnn').click(function() {
        $("#form2").valid();
    });
});

HTML:

<form id="form1" name="form1"> 
    Field 1: <input name="field1" type="text" />
</form>

<form id="form2" name="form2">
    Field 2: <input name="field2" type="text" />
</form>

<div>
    <input id="btn" type="button" value="Validate"/>
    <input id="btnn" type="button" value="Validate"/>
</div>

这是显示如何完成多步表单的另一个答案：

jQuery 验证：分两部分验证表单

jQuery Validation: Validate form in two parts

jquery

jquery-validate