javascript – jQuery验证无效 – jqueryvalidation.org

2023年11月3日 163次阅读

我正在使用
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
            }
        }
    });

});

HTML

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

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

这是一个错误还是我做错了什么？

最佳答案 问题是默认情况下验证器将忽略验证中隐藏的输入元素.

当你转到第2部分时,第1部分被隐藏,因此其中的输入字段也被隐藏,因此验证器忽略了这一点.

您可以使用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>
点赞