使用 jquery 验证插件验证模态弹出窗口中的用户输入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18420656/
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
validating user input inside modal popup using jquery validation plugin
提问by Brainchild
I am trying to validate user input in a jquery UI modal dialog. Jquery validation plugin is used for validation.
我正在尝试在 jquery UI 模式对话框中验证用户输入。Jquery 验证插件用于验证。
trying to verify validation in popup button click
尝试在弹出按钮单击中验证验证
<form id="frm">
<div>
<button name="btn" id="btn" type="button" >OpneModal</button>
<div id="dlg" style="display:none">
<div>
Name: <input type="text" id="txtName" name="txtName"/>
</div>
<div>
</div>
</div>
</div>
</form>
$(
function () {
var rules = {
txtName: {
required: true
}
};
var messages = {
txtName: {
required: "Please enter name"
}
};
$("#frm").validate({rules:rules, messages:messages});
$("#btn").click(
function () {
$("#dlg").dialog(
{
modal: true,
buttons: {
"Save": function () {
alert( $("#frm").valid());
},
"Cancel": function () {
$("#dlg").dialog("close");
}
}
}
);
}
);
});
But the validation is always success.
但验证总是成功的。
code is in js fiddle: http://jsfiddle.net/aGJrZ/6/
代码在 js 小提琴中：http: //jsfiddle.net/aGJrZ/6/
采纳答案by Sparky
The jQuery Validation plugin requiresthat all input elements mustbe contained within a set of <form></form>tags. However, using the DOM inspector, you can see that when your dialog box is constructed, it is outside of the <form></form>entirely.
jQuery Validation 插件要求所有输入元素都必须包含在一组<form></form>标签中。但是，使用 DOM 检查器，您可以看到在构造对话框时，它<form></form>完全在 DOM 之外。
Re-factor the HTML so that the formis contained insideyour dialog...
重构 HTML 以便form包含在您的对话框中...
<button name="btn" id="btn" type="button">Open Modal</button>
<div id="dlg" style="display:none">
<form id="frm">
<div>
Name: <input type="text" id="txtName" name="txtName" />
</div>
</form>
</div>
