Question

我有以下表格：

<form id="fromWiw" action="..." method="post">                    
  ...
  <div class="controls span5 pull-left">
      <label class="control-label" for="Quantity">@Resources.Quantity</label>
      <input class="span12" id="Quantity" name="Quantity" type="number" min="0" value="0" required />
  </div>
  <div class="controls span5 pull-left">
      <label class="control-label" for="Price">@Resources.Price</label>
      <input class="span12" id="Price" name="Price" required />
  </div>
  ...
</form>

对于验证部分，我有这段代码：

form.submit(function() {
    form.validate(
        {
            rules: {
                Quantity: { required: true, number: true},
                Price: { required: true, number: true }
            }
        });
});

问题验证工作正常，它检测价格和数量何时为空。但是，当价格输入包含非数字值（例如文本）时，验证成功通过。验证适用于数量输入。我在这里做错了吗？

Answer 1

您的代码：

form.submit(function() {
    form.validate({
        ...
    })
})

“数量输入的验证工作正常。我在这里做错了吗？”

是的，你是。

.validate()只是表单上插件的初始化方法...它不是测试方法，因此不属于submit处理程序。它应该在DOM就绪上被称为一次。该插件会自动捕获submit事件。

$(document).ready(function() { $('#myform').validate({ // rules & options }); });

您还将HTML5验证与验证插件混合使用。

无需将required属性放在HTML中，也无需在required内声明.validate()。该插件将从任一方法中获取;当使用插件时，它会动态地在novalidate="novalidate"标记中添加<form>属性，以禁用任何HTML5验证。

工作演示：http://jsfiddle.net/bNGQP/

使用jQuery Validation插件的多个规则

1 个答案: