Question

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

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

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

如果第一个输入被填入而第二个输入是空的，那么这些类会添加到第二个输入中，如果我也清空了第一个输入，那么也可以获得类。

但是如果我做相反的方式，那么第一个是空的，而第二个输入是空的，之后类仍然只添加到第一个。

另外，当我填写其中一个时，我想删除Class，但我不能这样做：

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

因为那样会提交表单而且很明显我无法添加return false;，因为即使填写了表单也会阻止表单进行处理......有关这些的任何建议吗？

Answer 1

LOH语句立即停止执行函数。所以这里的代码

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 == ""

正如@ imvain2指出的那样，您还需要删除错误类。否则，一旦出现错误一次，它总会看起来有错误。

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;

Answer 2

您正在返回第一个错误。如果要列出每个，则需要删除单个return语句。

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

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

2 个答案: