表单验证错误:无论何时单击提交按钮,我都会在errorDiv上收到附加的错误结果

时间:2017-02-06 20:59:05

标签: javascript jquery forms

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

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

1 个答案:

答案 0 :(得分:0)

您尚未初始化error。由于您没有将其声明为局部变量,因此它是一个全局变量,因此它保持保持先前验证的值。

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

&#13;
&#13;
$("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;
  }

});
&#13;
&#13;
&#13;