How To Validate Form Fields And Post The Form Data To Server Using JQuery And Ajax?

I am trying to validate form fields like, Name (must not be blank), Email_id(must be valid), Mobile(Must be valid). After the filling the all info I have to send this information t

Solution 1:

• You do not need an external click handler because the plugin automatically captures the click (of a type="submit") and blocks the submit.

• You need an input or button in your form that is type="submit", otherwise the plugin will not be triggered at all.

• You cannot have an external .ajax function while you have form.submit within the submitHandler of your .validate() method. This means the plugin is trying to submit the form while your click handler is trying to use ajax. They both cannot work at the same time. As per docs, any ajax belongs inside the submitHandler, and it's "the right place to submit a form via Ajax after it is validated".

• You don't need to check form validity because when you use the built in submitHandler, this is also done automatically.

• The jQuery4U code is nothing but complicated junk; everything can be simplified greatly. It serves no useful purpose other than to cause more confusion to those seeking guidance. It comes from a popular, yet poorly explained, online demo/tutorial by Sam Deering that is linked to/from many places.

  $(document).ready(function(){
  
      $("#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) {
  
              // 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));
                  }
              });
              return false; // block regular submit
          }
      });
  
  });
  

DEMO: http://jsfiddle.net/mh6cvf2u/