<pattern> ＆required在動態創建的表單上不起作用

Question

我正在嘗試為我正在重寫的數據表編輯器實施客戶端輸入驗證。 該表單是動態創建的，然后添加到引導程序模式。

我遇到了一個問題，其中添加<pattern>和/或required根本不會導致任何添加的功能。 該表格只接受輸入並提交，我對此感到很困惑。

編輯 ：我已經將相關的代碼添加到一個punkr

我現在已經添加了整個項目。 具體來說，問題與_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會很不錯:)），但是據我所知，您已經將自己的Submit按鈕放在了表單之外。

那是行不通的，因為按鈕不知道它正在提交什么。

嘗試將提交按鈕放入表單中。

或者，嘗試在“提交”按鈕上使用form屬性，該屬性應引用表單ID。 我自己從未使用過此功能，但據MDN稱，它是HTML5規范的一部分。

來自MDN的表單屬性說明：

輸入元素與之關聯的表單元素（其表單所有者）。 該屬性的值必須是同一文檔中元素的ID。 如果未指定此屬性，則此元素必須是元素的后代。 通過此屬性，您可以將元素放置在文檔中的任何位置，而不僅僅是它們的表單元素的后代。 輸入只能與一種形式相關聯。