我正在尝试验证jquery UI模式对话框中的用户输入。Jquery验证插件用于验证。
尝试在弹出按钮中验证验证点击
<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");
}
}
}
);
}
);
});
但验证总是成功的。
代码在js-fiddle中:http://jsfiddle.net/aGJrZ/6/
jQuery Validation插件要求所有输入元素必须包含在一组<form></form>
标记中。然而,使用DOM检查器,您可以看到,当构建对话框时,它完全在<form></form>
之外。
重新考虑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>
演示:http://jsfiddle.net/aGJrZ/9/