Javascript jQuery表单验证（如果==“执行此操作”）仅对第一个输入有效

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

当我使用这段代码并且两个输入都为空时，类“has error”和“has feedback”只附加到第一个输入

---

如果第一个输入被填充，第二个输入为空，那么类将添加到第二个输入中，如果我也清空了第一个输入，那么也会得到类

但是如果我换一种方式，那么第一个输入是空的，第二个输入是空的，类仍然只添加到第一个

另外，当我填写其中一个时，我想删除类，但我无法使用：

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

---

因为这将提交表单，而且很明显，我不能添加

返回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;

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;
    }
  });
});

您将返回第一个错误。如果要通过每个返回语句列出，则需要删除各个返回语句

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

如果第一个输入已填写，第二个输入为空，则类将添加到第二个输入，如果我也清空第一个输入，则该输入也将获得类若要更改该值，您需要在重新运行检查之前重置字段。您可能只想设置一个标志，然后在最后检查它，而不是在每次检查后返回false。@nurdyguy但这不是问题，如果两者都为空，我希望两者都有错误，但我想你的意思是，如果我填上空的，然后把填好的擦掉？@j08691非常欢迎你用这个来回答，因为我不知道你的意思或者怎么做，好像有几个人已经这样做了：）“如果第一个输入已填充，第二个输入为空，则类将添加到第二个输入，如果我也清空第一个输入，则该输入也将获得类。“若要更改该值，您需要在重新运行检查之前重置字段。您可能只想设置一个标志，然后在最后检查它，而不是在每次检查后返回false。@nurdyguy，但这不是问题，如果两者都为空，我希望两者都有错误，但我想你的意思是，如果我填了空的，然后删除了填好的？@j08691你很乐意回答这个问题，因为我不知道你的意思，也不知道怎么做，好像有几个人已经这样做了：）同样在if语句之前，删除类并隐藏错误div:
$(“#name_input”）.removeClass（“has error has feedback”）；$（“.name_span”）.hide（）；$（“#email_input”）.removeClass（“has error has feedback”）；$（“.email_span”）.hide（）；
@imvain2谢谢，这一点很好。编辑以包含该信息。跨距用“
$（“.form control feedback”）隐藏。hide（）
并且输入没有类
has error从一开始就有反馈：）但是我会试试这个！谢谢！@Pixeldoris这很方便！每次删除类只是确保不管字段什么时候有效，它们都不会出现。希望这些都有帮助。同样在if语句之前，删除它们类和隐藏错误div:
$（“.name\u input”）.removeClass（“has error has feedback”）；$（.name\u span”）.hide（）；$（“.email\u input”）.removeClass（“has error has feedback”）；$（“.email\u span”）.hide（）
@imvain2谢谢，很好。编辑以包含该信息。跨距用“
$（.form control feedback”）隐藏。hide（）
并且输入没有类
has error从一开始就有反馈：）但是我会试试这个！谢谢！@Pixeldoris这很方便！每次删除类只是确保不管字段什么时候有效，它们都不会出现。希望这一切都有帮助。