Javascript <；模式>&；所需不'；无法处理动态创建的表单

我正在尝试为正在重写的datatables编辑器实现客户端输入验证。表单是动态创建的，然后添加到引导模式中

我遇到了一个问题，添加

和/或

required

根本不会产生任何附加功能。表单只接受输入并提交，我很困惑为什么会这样

编辑：

---

我已将相关代码添加到

我现在已经添加了完整的项目。具体来说，这个问题与_openeditmodel函数和_openAddModal函数有关，在这里我动态生成表单并添加

pattern='patternVariable'

本例的模式（但是，无论我使用什么模式，它都不起作用）：

创建表单：

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

模式：

$('#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>");

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

---

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

阅读您的示例有点困难（plunkr会很好：），但从我看到的情况来看，您已经将提交按钮放在了表单之外

这不起作用，因为按钮不知道它提交了什么

尝试将submit按钮放入表单中

或者，尝试使用submit按钮上的

form

属性，该属性应该引用表单ID。我自己从未使用过这个属性，但根据MDN，它是HTML5规范的一部分

来自MDN的表单属性描述：

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

---

@RickBronger认为整个标记都是输入字段，所以我假设在标记的任何位置添加

required

都可以。这是错的吗？在验证方面，我希望我能够使用

验证输入，只需在您的输入字段上设置

required

就行了。在html文件中尝试。您可以设置

class='required'

，或者只调用datavalidation中的name元素。像这样

nameOfMyInputField:{required:true}

@RickBronger我在这里阅读了文档：并且假设如果给定的输入字段没有输入，表单将不会提交。你能澄清一下吗？因为我没有datavalidation.js文件，在这方面我是新手。你正在使用

，但你需要使用

@RickBronger。我尝试将其更改为并编辑了我的问题，但问题仍然存在。你是对的。我已将

放在模态页脚中，在模态正文中的

之外。但是，当我单击按钮时，它会将数据添加到我的datatable中，因此数据是提交的，只是没有经过验证。我尝试将按钮从模式页脚移动到

内部，但这并没有改变结果。另外，将

form=formID

添加到按钮也没有任何帮助，因此我可能需要一起开发一个不同的解决方案。如果您可以提供plunkr或其他类型的解决方案，我们可以更容易地提供帮助：）我在这里将相关代码添加到plunkr：我以前没有使用过plunkr，今天没有更多的时间，因此，如果这还不够，请告诉我，我将在接下来的某一天用整个脚本编辑它。是的，它不起作用-您有一些库引用丢失了。我已将完整的工作项目添加到plunkr中，并更新了我的问题。不要介意对象/变量名称的不同，我只是重构了一些代码。

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>");

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