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

Question

我想在两个部分中验证一个表单，当我单击btn按钮然后验证正确完成，但是当我单击btnn它不起作用并且总是验证field1

这是我的代码

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()方法用于初始化，第二个实例将始终被忽略。

你有两个选择：

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

要么

2. 其他一些技巧，如显示/隐藏表单字段，或使用.rules()方法根据单击的按钮动态添加/删除规则。如果您正在显示/隐藏这些字段，则在.validate()的同一实例中声明所有规则并利用此插件的默认行为，即忽略所有隐藏字段。

由于您没有透露多部分表单的工作概念，或者想要分两部分验证的目的，我将向您展示最简单的解决方案，即建议＃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>

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

https://stackoverflow.com/a/20481497/594235