使用验证器 jQuery 在 Click 事件上验证表单答案

【问题标题】：Validate a form on Click event with validator jQuery使用验证器 jQuery 在 Click 事件上验证表单
【发布时间】：2011-09-16 13:29:24
【问题描述】：

我正在使用 jQuery validate 来验证输入。我的代码：

 $('#button').click( function() {       
    $("#form").validate({              
        rules: {
            phone: {
                required: true,
                number: true,
                rangelength: [7, 14]
            }
        }
    }); 
});

还有 HTML：

<form id="form" name="form" method="post" action="">
 <input id="phone" name="phone" class="required" type="text" />
 <div class="button" id="send_b">Send</div>
 </form>

此代码不起作用。如果我添加这行 jQuery

$("#form").submit();

在 click 事件中它起作用。但我不想提交表单，所以我只想在点击时进行验证。

有人知道怎么做吗？

【问题讨论】：

提供更多关于“不工作”的细节。它没有按照您的预期做什么？
IIRC validate() 不进行验证，它设置提交验证。查看代码是否可以短路，或者是否有可以调用的方法实际上只进行验证。

标签： javascript jquery click submit validation

【解决方案1】：

只需添加.form()即可立即手动触发验证（默认行为等待提交事件）：

$('#button').click( function() {       
  $("#form").validate({              
    rules: {
      phone: {
        required: true,
        number: true,
        rangelength: [7, 14]
      }
    }
  }).form(); 
});

【讨论】：

【解决方案2】：

您的代码将函数绑定到按钮的click 事件。您正在做的是说“单击此按钮时，将表单验证应用于表单”。

这是使用验证插件的错误方式（我假设您使用的是this 验证插件）。相反，您只需在form 元素上直接执行validation() 方法；该插件负责处理submit 事件。

所以，摆脱 click 事件绑定。

【讨论】：

我刚刚遇到了一个问题，我正在验证单个输入框并且该值是链接的参数。但我认为你是对的，它会自动验证 onclick。

【解决方案3】：

在您的点击事件中使用表单方法form() 方法

【讨论】：