<pattern> & required doesn't work on dynamically created form
<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>