Jquery & Ajax Form Validation function

Question

I'm trying to find a way to do a form validation with Jquery. I currently have a problem with the validation function. I am able to send the form without having anything in the input fields. Could you please tell me the way to make it work.

  function Valid(){ var name1 = false; var name2 = false; var num = false; var mail = false; var msg = false;     if (document.myForm.name.value ==="") {          $('#name1').addClass('has-error');          $( "#name2" ).click(function(){$("#name1").removeClass('has-error');});          name1 = false;}            if (!/^[a-zA-Z]*$/g.test(document.myForm.name.value)) {          $('#name1').addClass('has-error');          $('#name2').click(function(){$('#name1').removeClass('has-error');});          name2 = false;}       if (document.myForm.num.value.length < 17){          $('#num1').addClass('has-error');          $( "#num2" ).click(function(){$("#num1").removeClass('has-error');});          num = false;}       if (document.myForm.email.value === "") {          $('#email1').addClass('has-error');          $( "#email2" ).click(function(){$("#email1").removeClass('has-error');});          mail = false;}       if (document.myForm.message.value === "") { $('#msg1').addClass('has-error');          $( "#msg2" ).click(function(){$("#msg1").removeClass('has-error');});          msg = false;} }// END VALIDATION   function SubmitFunction(){          if(Valid()){          $.ajax({              type: "POST",              url:"../php/process.php",              data: $('form.contact').serialize(),              success: function(msg){                $("#myModal").modal('hide');                $("#msgsuccess").delay(500).fadeIn(500).delay(1000).fadeOut(500);                }             });//End         }        }//End SubmitFunction 

Thank you in advance !!

Answer 1

Add return false; to all your if-statements, and use return true; at the bottom.

Also, always do your validation twice, server-side and client-side. Client-side isn't nessecary, but serverside is .

Edit: Also, please note, after each return, your function just stops working. So if for example input 1 and 4 wasn't filled in, it will return false at input 1, and it won't check input 4 until next time you submit it and input 1 being filled in.

Edit 1: Which can be eliminated by doing it this way:

 function Valid() {
         var name1 = false;
         var name2 = false;
         var num = false;
         var mail = false;
         var msg = false;
         var error = false;

         if (document.myForm.name.value === "") {
             $('#name1').addClass('has-error');
             $("#name2").click(function() {
                 $("#name1").removeClass('has-error');
             });
             name1 = false;
             error = true;
         }
         if (!/^[a-zA-Z]*$/g.test(document.myForm.name.value)) {
             $('#name1').addClass('has-error');
             $('#name2').click(function() {
                 $('#name1').removeClass('has-error');
             });
             name2 = false;
             error = true;
         }
         if (document.myForm.num.value.length < 17) {
             $('#num1').addClass('has-error');
             $("#num2").click(function() {
                 $("#num1").removeClass('has-error');
             });
             num = false;
             error = true;
         }
         if (document.myForm.email.value === "") {
             $('#email1').addClass('has-error');
             $("#email2").click(function() {
                 $("#email1").removeClass('has-error');
             });
             mail = false;
             error = true;
         }
         if (document.myForm.message.value === "") {
             $('#msg1').addClass('has-error');
             $("#msg2").click(function() {
                 $("#msg1").removeClass('has-error');
             });
             msg = false;
             error = true;
         }
         if(error === true) {
             return true;
         } else {
             return false;
         }
     } // END VALIDATION

 function SubmitFunction() {
         if (Valid()) {
             $.ajax({
                 type: "POST",
                 url: "../php/process.php",
                 data: $('form.contact').serialize(),
                 success: function(msg) {
                     $("#myModal").modal('hide');
                     $("#msgsuccess").delay(500).fadeIn(500).delay(
                         1000).fadeOut(500);
                 }
             }); //End 
         }
     } //End SubmitFunction

What this does is, it sets the error variable to false at the initialization of the function, but each time there is an error, it sets it to true. At the end of the function simply check if the error variable is true, if not, return false, if yes, return true.