使用验证程序jQuery验证Click事件上的表单

时间:2011-09-16 13:29:24

标签: javascript jquery click submit validation

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

 $('#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();  

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

有谁知道怎么做?

3 个答案:

答案 0 :(得分:14)

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

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

答案 1 :(得分:0)

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

这是使用验证插件的错误方法(我假设您正在使用this验证插件)。相反,您只需将validation()方法直接执行到form元素;该插件负责submit事件。

所以,摆脱click事件绑定。

答案 2 :(得分:0)

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