jQuery Validation插件在按钮点击时验证表单

Question

所以我有一个七部分表单,其中六个选项卡通过CSS隐藏,当用户点击下一个部分时淡入.

我已经提交了页面以确保插件正常工作; 它是.基本上它只是在没有验证当前部分的情况下进入表单的下一部分

举个例子

HTML

<form id = "form1" action = "backend.php" method = "post">
<label for "phone">First Name </label>
    <input type = "text" name = "fName" placeholder = "First Name..." class = "required" id = "fName" />
<button id = "btn" type = "button" class = "buttonnav next">next</button>
</form>

使用Javascript

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

Answer 1

如果你使用jQuery Validate插件和你的代码,那么在点击按钮之前不会初始化插件.如果插件没有初始化,那么就没有验证.

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

相反,.validate()在DOM上调用一次就可以初始化表单上的插件.

如果要在初始化后随时测试表单,可以使用该.valid()方法.

$(document).ready(function () {

    $('#form1').validate({ // initialize plugin
        // your options
    });

    $('#btn').click( function() { 
        $("#form1").valid();  // test the form for validity
    });

});

我不知道你是如何设置每个部分以便彼此交互或使用其他代码的.仅基于你的OP,这是一个使用我上面的答案的工作示例.

演示:http: //jsfiddle.net/pqVJM/

$(document).ready(function () {

    $('#form1').validate();

    $('#btn').click(function () {
        if ($("#form1").valid()) {
            alert('hello - valid form');
        }
    });

});