Jquery & Ajax Form Validierungsfunktion

Question

Ich versuche, eine Form Validierung mit Jquery zu finden. Ich habe derzeit ein Problem mit der Validierungsfunktion. Ich kann das Formular senden, ohne etwas in den Eingabefeldern zu haben. Können Sie mir bitte sagen, wie es funktioniert?

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

Vielen Dank im Voraus !!

Answer 1

Fügen Sie return false; zu allen Ihren if-Anweisungen hinzu, und verwenden Sie return true; unten.

Auch immer machen Sie Ihre Validierung zweimal, serverseitig und clientseitig. Client-Seite ist nicht erforderlich, aber Server-Seite ist.

Bearbeiten: Bitte beachten Sie auch, nach jeder Rückkehr funktioniert Ihre Funktion einfach nicht mehr. Wenn also zum Beispiel Eingang 1 und 4 nicht ausgefüllt wurden, wird Falsch an Eingang 1 zurückgegeben, und Eingang 4 wird nicht überprüft, bis Sie das nächste Mal einreichen und Eingang 1 ausgefüllt wird.

Bearbeiten 1 : Welche indem es auf diese Weise beseitigt werden kann:

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 

Was dies tut, ist es die Fehlervariable bei der Initialisierung der Funktion auf false setzt, aber jedes Mal ein Fehler ist, setzt es wahr. Überprüfen Sie am Ende der Funktion einfach, ob die Fehlervariable wahr ist, andernfalls geben Sie false zurück, wenn ja, geben Sie true zurück.