我有一个简单的页面,一个窗体和一个按钮外面的窗体。我试图验证表单上的按钮点击。
我已经在document.onready函数中添加了表单验证的规则。但是窗体没有得到验证。
我已经在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" />