title: <pattern> & required doesn't work on dynamically created form
body: <p>I'm trying to implement client-side input validation for a datatables-editor that I'm rewriting. The form is created dynamically and then added to a bootstrap-modal. </p>
  
  <p>I have encountered a problem where adding <code>&lt;pattern&gt;</code> and/or <code>required</code> doesn't result in any added functionality at all. The form just accepts the input and submits, and I'm quite confused as to why that is.</p>
  
  <p><strong>EDIT</strong>:
  I have added the relevant code to a <strong><a href="https://plnkr.co/edit/H39KFSYnOXplw7P9Utqt?p=preview" rel="nofollow noreferrer">plunkr</a></strong></p>
  
  <p>I have now added the full project. Specifically the issue is connected to the _openEditModal function and _openAddModal function, where i generate the forms dynamically and add the <code>pattern='patternVariable'</code>.</p>
  
  <p>The pattern for this example (however it doesn't work no matter what pattern I use): </p>
  
  <pre><code>^[a-zA-Z0-9\.]+$
  </code></pre>
  
  <p>Creating the form:</p>
  
  <pre><code> var data = "";
  
            data += "&lt;form name='altEditor-form' role='form'&gt;";
  
            for(var j = 0; j &lt; columnDefs.length; j++){
              data += "&lt;div class='form-group'&gt;&lt;div class='col-sm-3 col-md-3 col-lg-3 text-right' style='padding-top:7px;'&gt;&lt;label for='" + columnDefs[j].title + "'&gt;" + columnDefs[j].title + ":&lt;/label&gt;&lt;/div&gt;&lt;div class='col-sm-9 col-md-9 col-lg-9'&gt;";
  
              if(columnTypes[j].type.includes("text")){
                  data += "&lt;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] + "'&gt;";
              } 
              if(...){...}
  
              data +="&lt;/div&gt;&lt;div style='clear:both;'&gt;&lt;/div&gt;&lt;/div&gt;";
            }
  
            data += "&lt;/form&gt;";
  </code></pre>
  
  <p>As you can see I add the tags like so:</p>
  
  <pre><code>pattern='" + columnPattern[j].pattern + "'  title='" + patternErrMsg[j].msg + "' required ...
  </code></pre>
  
  <p>The modal:</p>
  
  <pre><code>$('#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("&lt;button type='button' data-content='remove' class='btn btn-default' data-dismiss='modal'&gt;Close&lt;/button&gt;\
                 &lt;input type='submit' data-content='remove' class='btn btn-primary' id='editRowBtn'&gt;Save Changes&lt;/input&gt;");
  </code></pre>
  
  <p>I made sure that the button has <code>type='submit'</code> as I've read that this is what triggers the pattern-check.</p>
  
  <p>editRowBtn code:</p>
  
  <pre><code>    $(document).on('click', '#editRowBtn', function(e)
      {
        e.preventDefault();
        e.stopPropagation();
        that._editRowData();
      });    
  </code></pre>
  
  <p>To make sure that my code is actually adding the attributes to the input i  checked the console:</p>
  
  <p><a href="https://i.stack.imgur.com/hHQbE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hHQbE.png" alt="enter image description here"></a></p>
  
  <p>Any help or advice is greatly appreciated as I'm kinda stuck here.</p>