BETLOG WARREN

 $(document).ready(function(){




 // validate signup form on keyup and submit
   setFormValidation('#createForm');
   setFormValidation('#editForm');

   $("#createForm").submit(function(e) {
    e.preventDefault(); // [prevents submitting form to do ajax]
});
   $("#editForm").submit(function(e) {
    e.preventDefault();// [prevents submitting form to do ajax]
});

      function setFormValidation(id) {
        $(id).validate({
          highlight: function(element) {
            $(element).closest('.form-group').removeClass('has-success').addClass('has-danger');
          },
          success: function(element) {
            $(element).closest('.form-group').removeClass('has-danger').addClass('has-success');
          },
          errorPlacement: function(error, element) {
            $(element).closest('.form-group').append(error);
          },
        });
      }




///////////////

AJAX FUNCTION

 function createSave(){

  if($("#createForm").valid()){ ---> checking if all fields are valid


////
MODAL EXAMPLE




<div class="modal fade " tabindex="-1" role="dialog" id="editAccount">
  <div class="modal-dialog modal-lg" role="document" >
    <div class="modal-content">
      <form  id="editForm" role="form" method="post" accept-charset="utf-8" >
      <div class="modal-header">
        <h3 class="modal-title">Account Details</h3>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

        <div class="row">
          <div class="col-md-6">
            <div class="form-group">
            <label>Firstname</label>
            <input type="text" class="form-control" name="firstname" id="efirstname" placeholder="Enter Firstname" required>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group">
            <label>Lastname</label>
            <input type="text" class="form-control" name="elastname" id="elastname"  placeholder="Enter Lastname" required>
            </div>
          </div>
          <div class="col-md-12">
            <div class="form-group">
            <label>Student Number</label>
            <input type="text" class="form-control" name="estudentNumber" id="estudentNumber"  placeholder="Enter Student Number" minlength="8" required>
            </div>
          </div>
           <div class="col-md-6">
             <div class="form-group">
            <label>Contact Number</label>
            <input type="text" class="form-control" name="econtact" id="econtact"  placeholder="Enter Contact Number" required>
            </div>
          </div>
          <div class="col-md-12">
             <div class="form-group">
            <label>Email</label>
            <input type="email" class="form-control" name="eemail" id="eemail"  placeholder="Enter Email Address" required>
            </div>
          </div>
          <div class="col-md-12">
            <div class="form-group">
            <label>Program</label>
              <select id="eprogram" name="eprogram" class="form-control" required>
                <option value ="">---</option>
              <option value="1">Bachelor of Science in Computer Science Major in Application Development</option><option value="2">Bachelor of Science in Information Technology in Service Management</option><option value="3">Bachelor of Science in Computer Network Administration</option><option value="4">Bachelor of Science in Information Technology Major in Information Network Security</option><option value="5">Bachelor of Science in Computer Science Major in Social Computing</option><option value="6">Bachelor of Science in Computational & Data Sciences</option><option value="7">Diploma in Application Development</option><option value="8">Diploma in Computer Network Administration</option><option value="9">Not Set</option>              </select>
            </div>
          </div>
           <div class="col-md-6">
            <div class="form-group">
            <label>Year</label>
              <select id="eyear" name="eyear" class="form-control" required>
              <option value="1">First Year</option><option value="2">Second Year</option><option value="3">Third Year</option><option value="4">Fourth Year</option><option value="5">Not Set</option>              </select>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group">
            <label>Section</label>
              <select id="esection" name="esection" class="form-control" required>
                <option value ="0">---</option>
              </select>
            </div>
          </div>


        </div>


        <input type="hidden" name="eid" id="eid">


      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-primary" type="submit" onclick='editSave();'>Save Changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>

        </form>
    </div>
  </div>
</div>