javascript - 我的联系表单验证的小错误。电子邮件验证与我的其余代码纠缠不清

Question

我已经为联系表单编写了一些验证代码。执行时，代码将突出显示无效输入并显示(错误)标签。

虽然验证工作正常，但电子邮件输入错误地显示了标签。代码如下:

 $(".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>

JSFiddle here

Answer 1

所以问题似乎是您在电子邮件无效时正确添加了错误标签类，但底部有一个 if 语句只检查 val()!=""这意味着电子邮件是否有有东西但不是有效的电子邮件，它仍然删除了标签。

最简单的解决方案是将 if 语句分开。

$(".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");
 }

});
});