jQuery表单验证按钮点击

前端之家收集整理的这篇文章主要介绍了jQuery表单验证按钮点击前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个简单的页面,一个窗体和一个按钮外面的窗体。我试图验证表单上的按钮点击。
我已经在document.onready函数添加了表单验证的规则。但是窗体没有得到验证。

HTML: –

<html>
<head>
   <script src="lib/jquery1.5.2.js"></script>
   <script src="lib/jquery.validate.js"></script>
   <script src="lib/myjs.js"></script>
</head>
<body>

<form id="form1" name="form1"> 
     Field 1: <input id="field1" type="text" class="required">
</form>

<div>
    <input id="btn" type="button" value="Validate">
</div>

</body>
</html>

JS: –

$(document).ready(function(){

$("#form1").validate({
   rules: {
     field1: "required"
   },messages: {
     field1: "Please specify your name"

   }
})

$('#btn').click(function() {
 $("#form1").validate();  // This is not working and is not validating the form
});

});

任何想法有什么问题?

解决方法

在你的点击处理程序中,错误是.validate()方法;它只初始化插件,它不验证窗体。

要消除在表单中提交按钮的需要,请使用.valid()触发验证检查…

$('#btn').on('click',function() {
    $("#form1").valid();
});

jsFiddle Demo

.validate() – 初始化插件(使用选项)一次在DOM就绪。

.valid() – 检查验证状态(布尔值)或在表单上随时触发验证测试。

否则,如果在表单容器中有一个type =“submit”按钮,则不需要特殊的点击处理程序和.valid()方法,因为插件自动捕获。

Demo without click handler

编辑:

您的HTML中还有两个问题…

<input id="field1" type="text" class="required">

>在.validate()中声明规则时,不需要class =“required”。它是多余的和多余的。
>缺少name属性。规则通过其名称在.validate()中声明。插件依赖于唯一的名称属性来跟踪输入。

应该…

<input name="field1" id="field1" type="text" />

猜你在找的jQuery相关文章