Kleiner Fehler bei der Validierung meines Kontaktformulars. Die E-Mail-Validierung wird mit dem Rest meines Codes verwickelt

Question

Ich habe einen Validierungscode für mein Kontaktformular geschrieben. Während der Ausführung markiert der Code eine ungültige Eingabe und zeigt das (Fehler-) Label an.

Während die Validierung ordnungsgemäß funktioniert, zeigt die E-Mail-Eingabe das Etikett falsch an. Code unten:

$(".cform").on("submit" , function(e){ 
 

 
    var hasError = false; 
 

 
    $(".inputValidation").each(function(){ 
 
     var $this = $(this); 
 
     var $label = $("label[for='"+$(this).attr("id")+"']"); 
 
     var validateEmail = function(elementValue){ 
 
      var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; 
 
    return emailPattern.test(elementValue); 
 
     } 
 
     var value = $('#email').val(); 
 
     var valid = validateEmail(value); 
 

 
     if($this.val() == ""){ 
 
     hasError = true; 
 
     $this.addClass("inputError"); 
 
     $label.addClass("label_error"); 
 
     e.preventDefault(); 
 
     }if(!valid){ 
 
     $("#email").addClass("inputError"); 
 
     $label.addClass("label_error"); 
 
     e.preventDefault(); 
 
     }if($this.val() != ""){ 
 
     $this.removeClass("inputError"); 
 
     $label.removeClass("label_error"); 
 
     }else{ 
 
     return true; 
 
    } 
 

 
    }); 
 
});

.cform { 
 
    width: 50%; 
 
} 
 

 
.cform .inputError { 
 
\t background-color: #ffffff; 
 
    outline: 2.5px solid #900f0f; 
 
    color: black; 
 
} 
 

 
.input_label { 
 
\t display: none; 
 
} 
 

 
.label_error { 
 
\t display: block; 
 
\t color: #900f0f; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form class="cform" action="" method="post"> 
 
\t \t \t \t \t <label class="input_label" for="name">ERROR</label> 
 
     \t <input type="text" id="name" class="inputValidation shad" name="name" value="" placeholder="Name..."> 
 
\t \t \t \t \t <label class="input_label" for="email">ERROR</label> 
 
     \t <input type="text" id="email" class="inputValidation shad" name="email" value="" placeholder="Email..."> 
 
\t \t \t \t \t <label class="input_label" for="phone">ERROR</label> 
 
     \t <input type="text" id="phone" class="inputValidation shad" name="phone" value="" placeholder="Contact Number..."> 
 
\t \t \t \t \t <label class="input_label" for="message">ERROR</label> 
 
     \t <textarea name="message" id="message" class="inputValidation shad" placeholder="Type your message here..."></textarea> 
 
     <input type="submit" class="" name="sumbit" value="send"> 
 
     </form>

JSFiddle here

Answer 1

so das Problem war es scheint, dass Sie die Fehler Label Klasse korrekt fügen, wenn die E-Mail ungültig war, aber es gab eine if-Anweisung an der Unterseite das hat nur auf val()! = "" geprüft. Das heißt, wenn die E-Mail etwas in sich hatte, aber keine gültige E-Mail war, wurde das Label entfernt.

Die einfachste Lösung ist, die if-Anweisungen zu trennen.

$(".cform").on("submit" , function(e){ 

var hasError = false; 

$(".inputValidation").each(function(){ 
    var $this = $(this); 
    var $label = $("label[for='"+$(this).attr("id")+"']"); 
    var validateEmail = function(elementValue){ 
    var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; 
    return emailPattern.test(elementValue); 
    } 
    var value = $('#email').val(); 
    var valid = validateEmail(value); 

    if($this.val() == ""){ 
    hasError = true; 
    $this.addClass("inputError"); 
    $label.addClass("label_error"); 
    e.preventDefault(); 
    }else{ 
    $this.removeClass("inputError"); 
    $label.removeClass("label_error"); 
    } 

    if(!valid){ 
    $("#email").addClass("inputError"); 
    $label.addClass("label_error"); 
    e.preventDefault(); 
    }else{ 
    $this.removeClass("inputError"); 
    $label.removeClass("label_error"); 
} 

}); 
}); 

Answer 2

Die Validierungen waren nicht in der richtigen Reihenfolge. Fehler, der durch das E-Mail-Feld erzeugt wurde, wurde durch eine Nicht-Null-Validierung außer Kraft gesetzt.

$(".cform").on("submit" , function(e){ 
 

 
    var hasError = false; 
 

 
    $(".inputValidation").each(function(){ 
 
     var $this = $(this); 
 
     var $label = $("label[for='"+$(this).attr("id")+"']"); 
 
     var validateEmail = function(elementValue){ 
 
      var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; 
 
    return emailPattern.test(elementValue); 
 
     } 
 
     var value = $('#email').val(); 
 
     var valid = validateEmail(value); 
 
\t \t //validation for mandatory start 
 
     if($this.val() == ""){ 
 
     hasError = true; 
 
     $this.addClass("inputError"); 
 
     $label.addClass("label_error"); 
 
     e.preventDefault(); 
 
     } \t else{ 
 
     $this.removeClass("inputError"); 
 
     $label.removeClass("label_error"); 
 
     return true; 
 
     } 
 
     //validation for mandatory end 
 

 
     //validation for email start 
 
     if(!valid){ 
 
     $("#email").addClass("inputError"); 
 
     $label.addClass("label_error"); 
 
     e.preventDefault(); 
 
     } 
 
     else{ 
 
     $this.removeClass("inputError"); 
 
     $label.removeClass("label_error"); 
 
     } 
 
    //validation for email end 
 
     
 
    }); 
 
});