Question

我正在尝试为我正在重写的数据表编辑器实现客户端输入验证。表单是动态创建的，然后添加到bootstrap-modal中。

我遇到了一个问题，即添加<pattern>和/或required根本不会产生任何添加的功能。表格只接受输入和提交，我很困惑为什么会这样。

修改：我已将相关代码添加到 plunkr

我现在已经添加了完整的项目。具体来说，问题是连接到_openEditModal函数和_openAddModal函数，我在其中动态生成表单并添加pattern='patternVariable'。

此示例的模式（但无论我使用何种模式，它都不起作用）：

^[a-zA-Z0-9\.]+$

创建表单：

 var data = "";

          data += "<form name='altEditor-form' role='form'>";

          for(var j = 0; j < columnDefs.length; j++){
            data += "<div class='form-group'><div class='col-sm-3 col-md-3 col-lg-3 text-right' style='padding-top:7px;'><label for='" + columnDefs[j].title + "'>" + columnDefs[j].title + ":</label></div><div class='col-sm-9 col-md-9 col-lg-9'>";

            if(columnTypes[j].type.includes("text")){
                data += "<input type='" + columnTypes[j].type + "'  id='" + columnDefs[j].title + "'  pattern='" + columnPattern[j].pattern + "'  title='" + patternErrMsg[j].msg + "' required name='" + columnDefs[j].title + "' placeholder='" + columnDefs[j].title + "' style='overflow:hidden'  class='form-control  form-control-sm' value='" + adata.data()[0][newaData[j].name] + "'>";
            } 
            if(...){...}

            data +="</div><div style='clear:both;'></div></div>";
          }

          data += "</form>";

如您所见，我添加标签如下：

pattern='" + columnPattern[j].pattern + "'  title='" + patternErrMsg[j].msg + "' required ...

模态：

$('#altEditor-modal').on('show.bs.modal', function() {
            $('#altEditor-modal').find('.modal-title').html('Edit Record');
            $('#altEditor-modal').find('.modal-body').html(data);
            $('#altEditor-modal').find('.modal-footer').html("<button type='button' data-content='remove' class='btn btn-default' data-dismiss='modal'>Close</button>\
               <input type='submit' data-content='remove' class='btn btn-primary' id='editRowBtn'>Save Changes</input>");

我确定该按钮有type='submit'，因为我已经知道这是触发模式检查的原因。

editRowBtn代码：

    $(document).on('click', '#editRowBtn', function(e)
    {
      e.preventDefault();
      e.stopPropagation();
      that._editRowData();
    });

为了确保我的代码实际上是将属性添加到输入中，我检查了控制台：

我非常感谢任何帮助或建议，因为我有点被困在这里。

Answer 1

有点难以阅读你的例子（一个plunkr会很好:) :)但是从我所看到的，你已经把你的提交按钮放在了你的表格之外。

这不起作用，因为按钮不会知道它提交的是什么。

尝试将提交按钮放在表单中。

或者，尝试使用提交按钮上的form属性，该属性应引用表单ID。我自己从未使用过这个，但根据MDN，它是HTML5规范的一部分。

来自MDN的表单属性描述：

input元素与之关联的表单元素（其表单所有者）。属性的值必须是同一文档中元素的id。如果未指定此属性，则此元素必须是元素的后代。此属性使您可以将元素放置在文档中的任何位置，而不仅仅是作为其表单元素的后代。输入只能与一个表单相关联。

<pattern>＆amp;要求不在动态创建的表单上工作

1 个答案: