HTML5 form validation in a bootstrap modal

HTML5 form validation in a bootstrap modal

I'm relatively new to jquery and javascript. 
The form opens up on clicking the button "Open Modal" in the modal.
Next, when I click on 'Save' in the modal, it should validate the HTML5 form and on successful validation should call another function "addDetails()".

How do I achieve this using existing jquery form validation plugin or any other method? What CDNs I need to refer to while using?

  1.     <!doctype html>
  2.     <html>
  3.      <head>
  4.      <meta charset="utf-8">
  5.      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  6.      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  7.      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  8.      </head>
  9.      <body>
  10.      <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myFormModal">Add Details</button>
  11.     
  12.      <div id="myFormModal" class="modal fade" role="dialog">
  13.       <div class="modal-dialog">
  14.     
  15.     
  16.      <div class="modal-content">
  17.       <div class="modal-header">
  18.      <button type="button" class="close" data-dismiss="modal">&times;</button>
  19.      <h4 class="modal-title">Add details</h4>
  20.       </div>
  21.       <div class="modal-body">
  22.      <form class="form-horizontal" id="myForm" name="contact" action="#">
  23.       <div class="form-group">
  24.      <label class="control-label col-sm-3" for="dor">Date of Registeration:</label>
  25.      <div class="col-sm-8">
  26.       <input type="date" class="form-control" id="dor" name="dor" required>
  27.      </div>
  28.       </div>
  29.       <div class="form-group">
  30.      <label class="control-label col-sm-3" for="name">Name:</label>
  31.      <div class="col-sm-8">
  32.       <input type="text" class="form-control" id="name" name="name" required>
  33.      </div>
  34.       </div>
  35.       <div class="form-group">
  36.      <label class="control-label col-sm-3" for="weburl">Website:</label>
  37.      <div class="col-sm-8">
  38.       <input type="url" class="form-control" id="weburl" name="weburl" required>
  39.      </div>
  40.       </div>
  41.       <div class="form-group">
  42.        <label class="control-label col-sm-3" for="myphoto">Image:</label>
  43.      <div class="col-sm-8">
  44.       <input type="text" class="form-control" id="myphoto" name="myphoto" required>
  45.      </div>
  46.       </div>
  47.       <hr />
  48.       <div class="form-group">        
  49.      <div class="col-sm-offset-3 col-sm-3">
  50.       <button type="button" class="btn btn-primary btn-sm" onclick="addDetails()">Save</button>
  51.      </div>
  52.      <div class="col-sm-3">
  53.       <button type="reset" class="btn btn-primary btn-sm">Reset</button>
  54.      </div>
  55.      <div class="col-sm-3">
  56.       <button type="button" class="btn btn-primary btn-sm close-external-modal" data-dismiss="modal">Close</button>
  57.      </div>
  58.       </div>
  59.      </form>
  60.       </div>
  61.      </div>
  62.       </div>
  63.      </div>
  64.      </body>
  65.     </html>