我正在使用http://

這完美地運作http:///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:///xs5vrrso/578/(當我點擊提交時,即使有一個空白的必填字段,它也會提交表格)

這是一個錯誤還是我做錯了什么？

解決方法:

問題是默認情況下驗證器將忽略驗證中隱藏的輸入元素.

當你轉(zhuǎn)到第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./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax./ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="http://ajax./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>