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

这里有两个选项：

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

OR

其他一些技巧，例如显示/隐藏表单字段，或使用.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

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

1 个答案: