title: How to give a friendly error message inside a modal with Bootstrap form?
body: <p>How do I give an error message inside modal after clicking update?</p>
  <p>In my example here I gave a <code>required</code> attribute on the input field.
  I want to change the error message based on <a href="https://medium.com/@andrew.burton/form-validation-best-practices-8e3bec7d0549" rel="nofollow noreferrer">Form Validation Best Practices</a>.</p>
  <p>(This code is part of CRUD PHP file for updating data in a table I had)</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
  
          &lt;div class="modal-header"&gt;
          &lt;h5 class="modal-title"&gt;Edit Data&lt;/h5&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
            &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
          &lt;/button&gt;
        &lt;/div&gt;
  
          &lt;div class="modal-body"&gt;
              &lt;form id="form-update" action="proses_edit.php" name="modal_popup" enctype="multipart/form-data" method="POST"&gt;
                  
                  &lt;div class="form-group" style="padding-bottom: 20px;"&gt;
                      &lt;label for="Name"&gt;Name&lt;/label&gt;
                      &lt;input type="hidden" name="modal_id" id="edit-id"  class="form-control" value="&lt;?php echo $r['modal_id']; ?&gt;"/&gt;
                      &lt;input type="text" name="modal_name" id="edit-name" class="form-control" value="&lt;?php echo $r['modal_name']; ?&gt;" required /&gt;
                  &lt;/div&gt;
  
                  &lt;div class="form-group" style="padding-bottom: 20px;"&gt;
                      &lt;label for="Description"&gt;Age&lt;/label&gt;
                      &lt;input type="text" id="edit-description" class="form-control" value="&lt;?php echo $r['description']; ?&gt;" required /&gt;
                  &lt;/div&gt;
  
                  &lt;div class="modal-footer"&gt;
                      &lt;button class="btn btn-success" type="submit"&gt;
                          Update
                      &lt;/button&gt;
  
                      &lt;button type="reset" class="btn btn-danger" data-dismiss="modal" aria-hidden="true"&gt;
                          Cancel
                      &lt;/button&gt;
                  &lt;/div&gt;
  
                  &lt;/form&gt;
  
              &lt;/div&gt;
             
          &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>