代码之家 › 专栏 › 技术社区 › Alessandro

内部表单上的JQuery验证(对话框)

jquery-ui-dialog jquery-validate html jquery javascript

Alessandro · 技术社区 · 9 年前

我有一个带有 form 包括另一个带有 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>

如果我删除外部窗体,它工作正常。我能解决这个问题吗?谢谢

注: 我无法删除外部表单,只能验证对话框中的字段。

2 回复 | 直到 9 年前

Blackcoat77 Sam Tyson 9 年前

你会得到这个错误,因为当你打电话时 $("#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>

这段代码应该运行良好!

非常感谢。

Alessandro 9 年前

我使用选项create解决了窗体内的包装对话框问题:

创建:函数(){ 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>

谢谢大家。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前