Question

我有一个带有form的jsp，其中包含另一个带有div的jsp（这是一个JQuery对话框），在对话框中我有一个表单，我是＆＃＃39;我要验证。

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

请参阅以下摘录：

＆＃13;

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

＆＃13;

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

注意：我无法移除外部表单，我只需要验证对话框中的字段。

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：

解决了表单中的包装对话框问题

create：function（）{ formDialog = $（this）.wrap（$（＆＃39;＆＃39;））。parent（）; }

结果如下：

＆＃13;

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

＆＃13;

感谢所有人。

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

2 个答案: