javascript - jQuery .validate 规则似乎不适用？ (jsfiddle)

Question

http://jsfiddle.net/sK9tL/1/

当我在表单页面的控制台中手动添加规则()时，它似乎按预期进行了验证。

我不确定我的格式化方式是否有问题？

$('#freeFormAdd').validate({
        rules:{
            freeFormName: {
                required: true, 
            },
            freeFormPrice: {
                required: true, 
            },
            freeFormQty: {
                required: true, 
            }
        }
    });

然后我使用 .valid() 来确定表单是否准备好提交。由于该页面是“无缝”的，我不需要提交表单，只需将一些商品添加到购物车(在 jsfiddle 中注释掉)。

有什么建议吗？

Answer 1

您的表单元素应该具有 name 属性而不是 id 属性，验证器根据元素的 name 属性选择元素。另外，您可以使用 submitHandler 方法来代替监听单击事件:

 $('#freeFormAdd').validate({
     rules: {
         freeFormName: {
             required: true,
         },
         freeFormPrice: {
             required: true,
         },
         freeFormQty: {
             required: true,
         }
     },
     submitHandler: function () {
         alert('the form is valid');
     }
 });

请注意，我已将按钮移至 form 元素的上下文，以便它触发提交事件。

http://jsfiddle.net/QU3XM/