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中放置一个断点时，我在检查器中看到了什么。尽管输入错误，但仍然会转到submitHandler（＆＃39; dsdfd＆＃39;而不是＆＃39; 123＆＃39;）

enter image description here

这是相关的标记：

<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”值，而不是“name”值。应该是：

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

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

如果您还根据需要标记字段，那么它可以正常工作。 fiddle

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

1 个答案: