Как сделать проверку формы и отправку данных формы на сервер в том же скрипте нажатием кнопки?

Question

Я пытаюсь проверить поля формы, такие как, Имя (не должно быть пустым), Email_id (должен быть действительным), Мобильный (должен быть действителен). После проверки информации я должен отправить данные формы для разрыва. Я пытаюсь проверить данные формы, а затем отправить информацию на сервер одним нажатием кнопки.

мой form.html

<form class="form-horizontal" id="register-form" > 
    <div class="col-lg-8">  
     <div class="fieldgroup"> 
      <label class="col-lg-3 control-label" for="userName">Name:<font 
       style="color: red;">*</font></label> 
      <div class="col-lg-9"> 
       <input style=" height: 30px;" class="form-control" id="userName" name="userName" 
        placeholder="Full Name" value="" type="text" required> 
      </div> 
     </div> 

     <div class="fieldgroup"> 
      <label for="email" class="col-lg-3 control-label">Email:<font 
       style="color: red;">*</font></label> 
      <div class="col-lg-9"> 
       <input style="height: 30px;" class="form-control" name="email" 
        id="email" placeholder="you@example.com" value="" 
        type="text" required> 
      </div> 
     </div> 

     <div class="fieldgroup"> 
      <label for="userContactNumber" class="col-lg-3 control-label">Mobile:<font 
       style="color: red;">*</font></label> 
      <div class="col-lg-9"> 
       <input style="height: 30px; width:100%;" class="form-control" id="userContactNumber" 
        name="userContactNumber" placeholder="Mobile Number" 
        onkeypress="enableKeys(event);" maxlength="10" type="text" required> 
      </div> 
     </div> 

     <div class="fieldgroup marg-bot-45"> 
      <label class="col-lg-3 control-label"></label> 
       <div class="col-lg-9"> 
        <a href="index.html" class="btn btn-info" id="btnBooking">Confirm 
         Booking&nbsp;<span class="glyphicon glyphicon-ok"></span> 
        </a> 
        <button type="button" class="btn btn-info" 
         onclick="javascript:clearAddress();"> 
         Clear&nbsp;<span class="glyphicon glyphicon-ok"></span> 
        </button> 
       </div> 
     </div> 
    </div>         
</form> 

сценарий для проверки формы

<script type="text/javascript"> 
     (function($,W,D) 
     { 
      var JQUERY4U = {}; 
      JQUERY4U.UTIL = 
      { 
       setupFormValidation: function() 
       { 
        //form validation rules 
        $("#register-form").validate({ 
         rules: { 
          userName: "required",       
          email: { 
           required: true, 
           email: true 
          },            
          userContactNumber: "required"      

         }, 
         messages: { 
          userName: "Please enter your Name", 
          userContactNumber: "Please enter your Mobile number",       
          email: "Please enter a valid email address",            

         }, 
         submitHandler: function(form) { 
          form.submit(); 
         } 
        }); 
       } 
      } 
      //when the dom has loaded setup form validation rules 
      $(D).ready(function($) { 
       JQUERY4U.UTIL.setupFormValidation(); 
      }); 
      })(jQuery, window, document); 
    </script> 

Скрипт для размещения данных формы

<script> 
    $(document).ready(function(){ 
    $("#btnBooking").on("click", function(e){ 

     // as you have used hyperlink(a tag), this prevent to redirect to another/same page 
     e.preventDefault(); 

     // get values from textboxs 
     var uName = $('#userName').val(); 
     var mailId = $('#addressemailId').val(); 
     var mobNum = $('#userContactNumber').val(); 

     $.ajax({ 
     url:"http://192.168.1.11/services/bookService4Homes.php", 
     type:"POST", 
     dataType:"json", 
     data:{type:"booking",Name:uName, Email:mailId, Mob_Num:mobNum }, 
     //type: should be same in server code, otherwise code will not run 
     ContentType:"application/json", 
     success: function(response){ 
     //alert(JSON.stringify(response)); 
     }, 
     error: function(err){ 
     //alert(JSON.stringify(err)); 
     } 
     }) 
    }); 
    }); 
</script> 

Answer 1

Оберните if($("#register-form").valid()){} вокруг вашего ajax, чтобы отправить форму только в том случае, если она прошла проверку.

if($("#register-form").valid()){ 
    $.ajax({ 
     url:"http://192.168.1.11/services/bookService4Homes.php", 
     type:"POST", 
     dataType:"json", 
     data:{type:"booking",Name:uName, Email:mailId, Mob_Num:mobNum }, 
     //type: should be same in server code, otherwise code will not run 
     ContentType:"application/json", 
     success: function(response){ 
      //alert(JSON.stringify(response)); 
     }, 
     error: function(err){ 
      //alert(JSON.stringify(err)); 
     } 
    }); 
}