javascript - 表单验证错误 : Anytime I click on the submit button, 我在 errorDiv 上收到附加错误结果

Question

我创建了一个表单和一个脚本来检查用户是否输入了必填字段。但是，每次按下提交按钮时，我都会收到一个附加的为验证创建的错误列表。

var error = "";
var subject = $("#subject").val();
var email = $("#email").val();
var content = $("#content").val();
var errorDiv = $("#errorText"); 

//option A
$("form").submit(function(e){

    if (email == ""){
      error += "Please enter a valid email <br>";
    }

    if (subject == ""){
      error += "<p>The Subject field is required <br>";
    }


    if(content == ""){
      error+= "Please enter details <br>"
    }

    if(error != ""){
      errorDiv.html('<div class="alert alert-danger" role="alert"><p>There were error(s) in your form:</p>' + error + '</div>');
      return false;
    }
    else{
      return true;
    }

});

这是我所经历的图像 enter image description here

Answer 1

您尚未初始化错误。由于您没有将其声明为局部变量，因此它是一个全局变量，因此它会保留上次验证的值。

并且包含输入字段值的变量也需要在函数中设置。否则，它们只包含页面加载时的值，而不是用户提交表单时的值。

$("form").submit(function(e) {
  var error = "";
  var subject = $("#subject").val();
  var email = $("#email").val();
  var content = $("#content").val();

  if (email == "") {
    error += "Please enter a valid email <br>";
  }

  if (subject == "") {
    error += "<p>The Subject field is required <br>";
  }

  if (content == "") {
    error += "Please enter details <br>"
  }

  if (error != "") {
    errorDiv.html('<div class="alert alert-danger" role="alert"><p>There were error(s) in your form:</p>' + error + '</div>');
    return false;
  } else {
    return true;
  }

});