我有一个带有form的jsp，其中包含另一个带有div的jsp(这是一个JQuery对话框)，并且在对话框中我有一个表单，我' ve 进行验证。
我的问题是:我无法创建在对话框中打开的内部表单。因此，当我尝试验证它时，出现以下错误:Uncaught TypeError:无法读取未定义的属性“form”。
请参阅以下代码片段:
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
</head>
<body>
<form id="extForm">
<div id="myDialog">
<form id="intForm">
<label for="field1">Don't write anything in textbox, just click the button</label>
<input type="text" id="field1" required>
</form>
</div>
</form>
</body>
<script>
$("#myDialog").dialog({
autoOpen: false,
modal: true,
title: "myDialog",
buttons: {
"Click me": function(){
$("#myDialog form").valid();
}
}
});
$("#myDialog").dialog("open");
</script>
</html>如果我删除外部表单，它就可以正常工作。我可以解决这个问题吗？谢谢。
注意:我无法删除外部表单，我必须仅验证对话框内的字段。
最佳答案
您收到该错误是因为当您调用 jQuery 的 $("#myDialog").dialog() 函数时，myDialog div 会丢失其内部 html 的表单。
请将 html 放回对话框之后、打开对话框函数之前
例如
<script>
$("#myDialog").dialog({
autoOpen: false,
modal: true,
title: "myDialog",
buttons: {
"Click me": function(){
$("#myDialog form").valid();
}
}
});
$("#myDialog").html("<form id='intForm'><label for='field1'>Don\'t write anything in textbox, just click the button</label><input type='text' id='field1' required></form>");
$("#myDialog").dialog("open");
</script>
这段代码应该可以正常运行!
谢谢
关于javascript - 内部表单上的 JQuery 验证(对话框)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41938885/