javascript - jQuery 验证不工作 - jqueryvalidation.org

Question

我正在使用 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/ (当我点击提交时，即使有一个空白的必填字段，它也会提交表单)

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

Answer 1

问题是默认情况下验证器会忽略验证中隐藏的输入元素。

当您转到第 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>