JQuery 内部表单验证（对话框）

Question

我有一个 jsp 和一个 form，其中包括另一个 jsp 和一个 div（这是一个 JQuery 对话框）并且在对话框中我有一个表格需要验证。

我的问题是：我无法创建在对话框中打开的内部表单。因此，当我尝试验证它时，出现以下错误：Uncaught TypeError: Cannot read property 'form' of undefined.

请参阅以下代码段：

<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>

如果我删除外部表单，它可以正常工作。我能解决这个问题吗？谢谢。

注意：我无法删除外部表单，我必须只验证对话框中的字段。

Answer 1

您收到该错误是因为当您调用 jQuery 的 $("#myDialog").dialog() 函数时，myDialog div 丢失了其内部 html.

的表单

请将html放回对话框之后和打开对话框功能之前

e.x.

<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>

此代码应该运行没问题！

谢谢

Answer 2

我使用选项创建解决了在表单内包装对话框的问题：

create: function(){ formDialog = $(this).wrap($('')).parent(); }

这是结果：

<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="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
</head>
<body>
  <form id="extForm">
    <div id="myDialog">
        <label for="field1">Don't write anything in textbox, just click the button</label>
        <input type="text" id="field1" required>
    </div>
  </form>
</body>
<script>
  var formDialog;
  $("#myDialog").dialog({
    autoOpen: false,
    modal: true,
    title: "myDialog",
    create: function(){
      formDialog = $(this).wrap($('<form>')).parent();
    },
    buttons: {
      "Click me": function(){
        formDialog.valid();
      }
    }
  });
  $("#myDialog").dialog("open");
</script>
</html>

感谢大家。

JQuery 内部表单验证（对话框）

JQuery validation on inner form (dialog)

javascript

jquery

html

jquery-validate

jquery-ui-dialog