我正在使用http://

這完美地運(yùn)作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>

但是當(dāng)我將表單更改為像這樣的單獨(dú)部分時(shí),它不起作用
http:///xs5vrrso/578/(當(dāng)我點(diǎn)擊提交時(shí),即使有一個(gè)空白的必填字段,它也會(huì)提交表格)

這是一個(gè)錯(cuò)誤還是我做錯(cuò)了什么？

解決方法:

問題是默認(rèn)情況下驗(yàn)證器將忽略驗(yàn)證中隱藏的輸入元素.

當(dāng)你轉(zhuǎn)到第2部分時(shí),第1部分被隱藏,因此其中的輸入字段也被隱藏,因此驗(yàn)證器忽略了這一點(diǎn).

您可以使用ignore選項(xiàng)覆蓋此設(shè)置,但更好的解決方案是在移動(dòng)到新部件之前驗(yàn)證字段

$(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>