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

Posted 2023-05-09

【中文标题】我的联系表单验证的小错误。电子邮件验证与我的其余代码纠缠不清

【英文标题】：Small bug with my contact form validation. Email validation is getting tangled with the rest of my code

【发布时间】：2017-12-17 08:39:48

【问题描述】：

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

虽然验证正常工作，但电子邮件输入未正确显示标签。代码如下：

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

【问题讨论】：

你能举一个例子说明一组输入不能满足你的期望吗？在这里测试它，当我不输入根据您的正则表达式有效的电子邮件时，我只会看到电子邮件错误（这在许多非美国域上会失败，地址为+用户名等，但这是一个不同的主题）。

【参考方案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");
 

);
);

【参考方案2】：

验证的顺序不正确。由电子邮件字段生成的错误，被非空验证覆盖。

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