jQuery表单验证(如果==“执行此操作”）仅适用于第一次输入

jQuery form validation ( if == "" do this) only works on first input

本文关键字：执行此操作 输入 第一次 适用于 操作 验证 表单 如果 执行 jQuery      更新时间：2023-09-26

我有一个表单，我正在使用jQuery来验证输入是否为空。（我也在使用引导程序）

<form action="" method="post">
  <div id="name_input" class="form-group">
    <input id="name" type="text" name="name" placeholder="Name">
    <span class="glyphicon glyphicon-remove form-control-feedback name_span></span>
  </div>
  <div id="email_input" class="form-group">
    <input id="email" type="email" name="email" placeholder="Email">
    <span class="glyphicon glyphicon-remove form-control-feedback email_span></span>
  </div>
  <input type="submit" name="submit" value="save">
</form>

使用jQuery

$(document).ready(function() {
  $('.form-control-feedback').hide();
  $(".submit").click(function() {
    var name = $("#name").val();
    if (name == "") {
      $("#name_input").addClass("has-error has-feedback");
      $(".name_span").show();
      return false;
    }
    var email = $("#email").val();
    if (email == "") {
      $("#email_input").addClass("has-error has-feedback");
      $(".email_span").show();
      return false;
    }
  });
});

当我使用这个代码并且两个输入都为空时，类"haserror"answers"hasfeedback"只附加到第一个输入。

如果第一个输入被填充，而第二个输入是空的，那么类会添加到第二个，如果我也清空了第一个，那么它也会得到类。

但如果我采取相反的方式，那么第一个输入首先为空，第二个输入之后为空，那么类仍然只添加到第一个。

此外，当我填写其中一个时，我想删除Class，但我不能用做到这一点

} else {
   $("#name_input").removeClass("has-error has-feedback");
   $(".name_span").hide();
}

因为这会提交表格，很明显我不能添加return false;，因为即使填写了表格，也会阻止表格的处理……对此有什么建议吗？

return语句会立即停止执行函数。所以这个代码在这里

if (name == "") {
  $("#name_input").addClass("has-error has-feedback");
  $(".name_span").show();
  return false;
}
var email = $("#email").val();
if (email == "") {
  $("#email_input").addClass("has-error has-feedback");
  $(".email_span").show();
  return false;
}

说如果name == ""，甚至不要评估电子邮件。相反，您可能希望使用一个标志来查看是否发生了任何错误。

var dataIsValid = true;
var name = $("#name").val();
if (name == "") {
  $("#name_input").addClass("has-error has-feedback");
  $(".name_span").show();
  dataIsValid = false;
}
var email = $("#email").val();
if (email == "") {
  $("#email_input").addClass("has-error has-feedback");
  $(".email_span").show();
  dataIsValid = false;
}
return dataIsValid;

正如@imvain2所指出的，您还需要删除错误类。否则，一旦你得到一个错误，它看起来总是有一个错误。

var dataIsValid = true;
var name = $("#name").val();
if (name == "") {
  $("#name_input").addClass("has-error has-feedback");
  $(".name_span").show();
  dataIsValid = false;
} else { // Valid, remove the error classes
  $("#name_input").removeClass("has-error has-feedback");
  $(".name_span").hide();
}
var email = $("#email").val();
if (email == "") {
  $("#email_input").addClass("has-error has-feedback");
  $(".email_span").show();
  dataIsValid = false;
} else { // Valid, remove the error classes
  $("#email_input").removeClass("has-error has-feedback");
  $(".email_span").hide();
}
return dataIsValid;

返回第一个错误。如果你想列出每一个，你需要删除单独的返回语句。

$(document).ready(function() {
  $('.form-control-feedback').hide();
  $(".submit").click(function() {
    var name = $("#name").val(),
        errorMsg = [];
    if (name == "") {
      $("#name_input").addClass("has-error has-feedback");
      $(".name_span").show();
      errorMsg.push('Invalid Name');
    }
    var email = $("#email").val();
    if (email == "") {
      $("#email_input").addClass("has-error has-feedback");
      $(".email_span").show();
      errorMsg.push('Invalid Email');
    }
    if (errorMsg.length > 0 ){
       // alert('Errors:'n' + errMsg.join(''n'));
       return false;
    }
  });
});
相关文章：