jQuery验证不起作用

我使用http://jqueryvalidation.org

可以正常工作http://jsfiddle.net/xs5vrrso/

jQuery

$(document).ready(function () {
    $('#myform').validate({ // initialize the plugin
        rules: {
            field1: {
                required: true,
                email: true
            },
            field2: {
                required: true,
                minlength: 5
            }
        }
    });
});

<form id="myform">
    <input type="text" name="field1" />
    <input type="text" name="field2" />
    <input type="submit" />
</form>

但是当我将表单更改为像这样的单独部分时，它不起作用http://jsfiddle.net/xs5vrrso/578/(当我点击提交时，即使有一个空白的必填字段，它也会提交表单)

是bug还是我做错了什么?

默认情况下，验证器会忽略隐藏的输入元素。

当你转到第二部分时，第一部分是隐藏的，所以它里面的输入字段也隐藏了，所以验证器会忽略它。

您可以使用ignore选项来覆盖此设置，但更好的解决方案是在移动到新部分(如
)之前验证字段。
$(document).ready(function () { $('#myform').validate({ // initialize the plugin ignore: [], rules: { field1: { required: true } }, submitHandler: function (form) { alert('valid form submitted'); return false; } }); }); $("#next-btn").click(function () { if ($('#signup-part-1 :input').valid()) { $('#signup-part-1').hide(); $('#signup-part-2').show(); } });
$(document).ready(function() { $('#myform').validate({ // initialize the plugin ignore: [], rules: { field1: { required: true } }, submitHandler: function(form) { alert('valid form submitted'); return false; } }); }); $("#next-btn").click(function() { if ($('#signup-part-1 :input').valid()) { $('#signup-part-1').hide(); $('#signup-part-2').show(); } });
#signup-part-2 { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/additional-methods.js"></script> <form id="myform"> <div id="signup-part-1">PART 1 <br> <input type="text" name="field1"> <br> <button type="button" class="btn-primary pull-right" id="next-btn">Next</button> </div> <div id="signup-part-2">PART 2 <br> <input type="submit"> </div> </form>

下一步

类型错误，应该是"submit"

相关内容

最新更新

热门标签：