javascript - jQuery Validate 似乎将无效表单传递给submitHandler

Question

我尝试使用 jQuery Validate 来阻止我的 ajax 表单在三个字段包含数字以外的任何字符时提交。显然我做错了什么，但我看不出是什么。

编辑:似乎有两个错误。我的验证规则使用字段 ID 而不是字段名称。但是，解决该问题后，表单仍然意外地验证..

这是我的 jQuery 代码:

(function() {
  $(document).ready(function() {

    formSubmits();

    /**
     * Handles all the form submits that go on.
     * This is primarily the ID search and the form submit.
     */
    function formSubmits() {

      /*** SAVE RECIPE ***/
      // validate form
      $("#category-editor").validate({
        rules: {
          "time-prep": {number: true},    /* not sure why validation doesn't work.. */
          "time-total": {number: true},   /* according to this, it should: http://goo.gl/9z2odC */
          "quantity-servings": {number: true}
        },
        submitHandler: function(form) {

          // submit changes
          $.getJSON("setRecipe.php", $(form).serialize() )
            .done(function(data) {

              // de-empahaize submit button
              $('.footer input[type=submit]')
                .removeClass('btn-primary')
                .addClass('btn-default');
            });

          // prevent http submit
          return false;
        }
      });
    }
  });
})(jQuery);

这是当我在submitHandler 中放置断点时在检查器中看到的内容。尽管输入错误(值是“dsdfd”而不是“123”)，它还是到达了submitHandler

这是相关标记:

<form id="category-editor" class="form-inline" method="get">

....
                <div class='form-group'>
                  <div>
                    <label for="time-prep">Prep time (min):</label>
                    <input value="" id="time-prep" name="activeTime" class="form-control min-calc jqValidateNum" data-calc-dest="time-prep-desc" type="number"> 
                    <input value="" id="time-prep-desc" name="activeTimeDesc" class="form-control subtle" type="text"> 
                  </div>
                </div>

                <div class='form-group'>                    
                  <div>
                    <label for="time-total">Total time (min):</label>
                    <input value="" id="time-total" name="totalTime" class="form-control min-calc jqValidateNum" data-calc-dest="time-total-desc" type="number"> 
                    <input value="" id="time-total-desc" name="totalTimeDesc" class="form-control subtle" type="text"> 
                  </div>
                </div>

                <div class='form-group'>                    
                  <div>
                    <label for="quantity-servings">Servings:</label>
                    <input value="" id="quantity-servings" name="servings" class="form-control jqValidateNum" type="number"> 
                  </div>
                </div>

....
</form>

Answer 1

您已使用 <input> 的“id”值设置了规则。元素而不是它们的“名称”值。应该是:

    rules: {
      "activeTime": {number: true}, 
      "totalTime": {number: true},
      "servings": {number: true}
    },

编辑 - 现在您已经解决了这个问题，我认为问题在于输入元素的“value”属性为空，因为您已将它们声明为 type=number 。 Firefox 和 Chrome 允许您在字段中输入任何内容，但除非字段确实包含数字，否则它们不会有非空值。

如果您也将字段标记为必填，那么它就可以工作。 fiddle