Small error with my contact form validation. Email Authentication gets confused with the rest of my code
I wrote a verification code for my contact form. During code execution, invalid input is highlighted and a label (error) is displayed.
While the check is working correctly, entering the email incorrectly displays the label. Code below:
$(".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 {
background-color: #ffffff;
outline: 2.5px solid #900f0f;
color: black;
}
.input_label {
display: none;
}
.label_error {
display: block;
color: #900f0f;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="cform" action="" method="post">
<label class="input_label" for="name">ERROR</label>
<input type="text" id="name" class="inputValidation shad" name="name" value="" placeholder="Name...">
<label class="input_label" for="email">ERROR</label>
<input type="text" id="email" class="inputValidation shad" name="email" value="" placeholder="Email...">
<label class="input_label" for="phone">ERROR</label>
<input type="text" id="phone" class="inputValidation shad" name="phone" value="" placeholder="Contact Number...">
<label class="input_label" for="message">ERROR</label>
<textarea name="message" id="message" class="inputValidation shad" placeholder="Type your message here..."></textarea>
<input type="submit" class="" name="sumbit" value="send">
</form>
+3
source to share
2 answers
so the problem is that you were correctly adding the error label class when the message was invalid, but at the bottom there was an if statement that only checks for val ()! = "", which means if the email was something in but was not a valid email address, it was still removing the label.
The simplest solution is to separate the if statements.
$(".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");
}
});
});
0
source to share
The validations were not in the correct sequence. The error that was generated by the email field was overridden with a non-empty validation.
$(".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);
//validation for mandatory start
if($this.val() == ""){
hasError = true;
$this.addClass("inputError");
$label.addClass("label_error");
e.preventDefault();
} 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
});
});
0
source to share