Question

页面上的电子邮件提交字段有问题。当我输入错误的电子邮件地址时，它会显示“请输入您的有效电子邮件地址”消息。但是，当我更正它时，它会显示“谢谢”消息，但错误消息仍然出现！

请帮助我解决问题=更正地址后，使错误消息消失。谢谢。

var error_01 = "Please enter your valid email address";
var thankyou = "Thank you";

function trim(str) {
  str = str.replace(/^\s*$/, '');
  return str;
}

function $Npro(field) {
  var element =
    document.getElementById(field);
  return element;
  return false;
}

function emailvalidation(field, errorMessage) {
  var goodEmail = field.value.match(/[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.  [a - zA - Z0 - 9!#$ % & '*+/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0- 
    9
  ]) ? \.) + [a - zA - Z0 - 9]( ? : [a - zA - Z0 - 9 - ] * [a - zA - Z0 - 9]) ? /); apos=field.value.indexOf("@");dotpos=field.value.lastIndexOf(".");lastpos=field.value.length-1;tldLen = lastpos-dotpos;dmLen=dotpos-apos-1;var badEmail= (tldLen<2 || dmLen<2 || apos<1);  if (!goodEmail || badEmail    
$Npro("Error").innerHTML = errorMessage;
$Npro("Error").style.display =
  "inline";
field.focus();
field.select();
return false;
}
else {
  return true;
}
}

function emptyvalidation(entered, errorMessage) {
  $Npro("Error").innerHTML = "";
  with(entered) {
    if (trim(value) == null || trim(value) == "") { /*alert(errorMessage);*/
      $Npro("Error").innerHTML = errorMessage;
      $Npro("Error").style.display = "inline";
      return false;
    } else {
      return true;
    }
  } //with
} //emptyvalidation

function signup(thisform) {
  with(thisform) {
    if (emailvalidation(email, error_01) == false) {
      email.focus();
      return
      false;
    };

  }
  $("#submit, #myResponse").hide(); // Hide the buttom and the message
  $("#loading").show(); // show the loading image.
  params = $("#subform").serialize();
  $.post("optIn.php", params, function(response) {
    //alert(response); //may need to activate this line for debugging.
    $("#loading").hide();
    $("#myResponse").html(thankyou); //Writes the "Thank you" message that 
    comes from optIn.php and styles it.
    $('#myResponse').css({
      display: 'inline',
      color: 'green'
    })
    $("#submit").show();
  })
  return false;
}

<section id="signup" class="signup-section">
  <div class="container">
    <div class="row">
      <div class="col-md-10 col-lg-8 mx-auto text-center">

        <i class="fas fa-shuttle-van fa-2x mb-2 text-white"></i>
        <h2 class="text-white mb-5">Stay in touch!</h2>
        <form onsubmit="return signup(this);return false;" method="post" name="subform" id="subform" action="optIn.php" class="form-inline d-flex">
          <input type="text" id="email" name="email" value="" class="form-control 
     flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" placeholder="YOUR E-MAIL...">
          <button type="submit" id="submit" name="submit" class="btn btn-primary 
     mx-auto">Log in</button>

          <div style="width:100%"><span id="Error" style="color:red;display:none;"></span></div>
          <div id="myResponse" style="display:none;"></div>
          <div id="loading" style="display:none;"><img src="wait.gif" alt=""></div>
        </form>
      </div>
    </div>
  </div>
</section>

Answer 1

问题在于，在显示错误消息后，您再也不会隐藏或删除该错误消息。

在您的验证功能中，将其他情况扩展为如下所示：

else {
  $Npro("Error").innerHTML="";
  $Npro("Error").style.display="none";
  return true;
}

电子邮件订阅-成功和错误消息切换

1 个答案: