jQuery 表单验证不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14563495/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery form validate not working
提问by Caballero
I've spent hours on this and I have no idea why this jquery validate() doesn't work. I finally broke it down to minimum and it still doesn't work. This is the actuall code:
我在这上面花了几个小时，我不知道为什么这个 jquery validate() 不起作用。我终于把它分解到最低限度，但它仍然不起作用。这是实际代码：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>
<script>
$(document).on("click", "#submit", function() {
$("#form").validate({
rules: {
input: { required: true}
},
messages: {
input: { required: "required" }
},
ignore: "",
errorClass: 'fieldError',
onkeyup: false,
onblur: false,
errorElement:'label',
submitHandler: function() {
alert("alert");
}
});
return false;
});
</script>
</head>
<body>
<form id="form">
<input type="text" value="" name="input" id="input" />
</form>
<a href="#" id="submit">submit</a>
</body>
</html>
Am I missing something obvious here? I get no errors and nothing happens when "submit" is clicked.
我在这里遗漏了一些明显的东西吗？我没有收到任何错误，单击“提交”时没有任何反应。
UPDATE:I have moved the validate() outside the "click" event into document "ready" event and now it fires off when the document is loaded outputting message in the console "nothing selected, can't validate, returning nothing" This is not how I want it to work obviously, so how do I attach it to the click event?
更新：我已将“click”事件之外的 validate() 移动到文档“ready”事件中，现在它在加载文档时触发，在控制台中输出消息“未选择任何内容，无法验证，不返回任何内容”这是不是我希望它明显工作的方式，那么我如何将它附加到点击事件？
UPDATE 2:Thanks to @NXT i finally make the validation run, however "submitHandler" is still not working and I need to use it to make Ajax call, because the form must be submitted without a page reload.
更新 2：感谢@NXT，我终于运行了验证，但是“submitHandler”仍然不起作用，我需要使用它来进行 Ajax 调用，因为必须在不重新加载页面的情况下提交表单。
采纳答案by NXT
Did you intentionally put the submit button outside the form? I modified it, to submit the form when clicked. It works now - the validation message appears, and the alert message too (when you submit the form with some content). Either use the code parts below, or try it online - http://jsfiddle.net/Vcmfs/
您是否有意将提交按钮放在表单之外？我修改了它，单击时提交表单。它现在可以工作 - 出现验证消息，以及警报消息（当您提交带有某些内容的表单时）。要么使用下面的代码部分，要么在线尝试 - http://jsfiddle.net/Vcmfs/
Head:
头：
<script>
$(function(){
$("#form").validate({
rules: {
input: { required: true}
},
messages: {
input: { required: "required" }
},
ignore: "",
errorClass: 'fieldError',
onkeyup: false,
onblur: false,
errorElement:'label',
submitHandler: function() {
alert("alert");
}
});
$("#submit").click(function(){
$("#form").submit();
return false;
});
});
</script>
Body:
身体：
<form id="form">
<input type="text" value="" name="input" id="input" />
</form>
<a href="#" id="submit">submit</a>
回答by jrummell
.validate()doesn't actually perform the validation, it configures the form for validation.
.validate()实际上并不执行验证，它配置表单以进行验证。
If you change your submit link to a submit button <input type='submit' value='Submit'/>, it will work as expected.
如果您将提交链接更改为提交按钮<input type='submit' value='Submit'/>，它将按预期工作。
Another option is to call .valid()in your link click handler, which will trigger validation.
另一种选择是调用.valid()您的链接点击处理程序，这将触发验证。
See this fiddle for a working example: http://jsfiddle.net/v5HQr/1/
有关工作示例，请参阅此小提琴：http: //jsfiddle.net/v5HQr/1/
