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?
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
- </head>
- <body>
- <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myFormModal">Add Details</button>
-
- <div id="myFormModal" class="modal fade" role="dialog">
- <div class="modal-dialog">
-
-
- <div class="modal-content">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal">×</button>
- <h4 class="modal-title">Add details</h4>
- </div>
- <div class="modal-body">
- <form class="form-horizontal" id="myForm" name="contact" action="#">
- <div class="form-group">
- <label class="control-label col-sm-3" for="dor">Date of Registeration:</label>
- <div class="col-sm-8">
- <input type="date" class="form-control" id="dor" name="dor" required>
- </div>
- </div>
- <div class="form-group">
- <label class="control-label col-sm-3" for="name">Name:</label>
- <div class="col-sm-8">
- <input type="text" class="form-control" id="name" name="name" required>
- </div>
- </div>
- <div class="form-group">
- <label class="control-label col-sm-3" for="weburl">Website:</label>
- <div class="col-sm-8">
- <input type="url" class="form-control" id="weburl" name="weburl" required>
- </div>
- </div>
- <div class="form-group">
- <label class="control-label col-sm-3" for="myphoto">Image:</label>
- <div class="col-sm-8">
- <input type="text" class="form-control" id="myphoto" name="myphoto" required>
- </div>
- </div>
- <hr />
- <div class="form-group">
- <div class="col-sm-offset-3 col-sm-3">
- <button type="button" class="btn btn-primary btn-sm" onclick="addDetails()">Save</button>
- </div>
- <div class="col-sm-3">
- <button type="reset" class="btn btn-primary btn-sm">Reset</button>
- </div>
- <div class="col-sm-3">
- <button type="button" class="btn btn-primary btn-sm close-external-modal" data-dismiss="modal">Close</button>
- </div>
- </div>
- </form>
- </div>
- </div>
- </div>
- </div>
- </body>
- </html>