引导验证器和正确的表单字段验证答案

【问题标题】：Bootstrap validator and proper form field validation引导验证器和正确的表单字段验证
【发布时间】：2018-03-05 15:44:50
【问题描述】：

我正在做一个引导表单验证，假设用户没有在文本中输入值 a，他们直接点击提交按钮，我们以红色显示错误。之后，用户将在文本字段中输入值意味着我必须隐藏错误颜色。

我希望通过适当的验证在该特定文本字段中成功显示绿色。正确的验证意味着假设电子邮件意味着@符号在那里，而移动意味着 10 位数字。之后只有表单可以提交的所有字段值字段都经过适当的验证。我怎样才能做到这一点？

$( document ).ready(function() {
   $("#btn-submit").click(function(){
	  var firstName = $("#firstName").val();
	  var email = $("#emailId").val();
	  //console.log(email);
	  if(firstName != ''){
		  $("#fname").addClass("has-success has-feedback");
		  $(".fname").addClass("glyphicon glyphicon-ok form-control-feedback");
	  }else{
		  $("#fname").addClass("has-error has-feedback");
		   $(".fname").addClass("glyphicon glyphicon-remove form-control-feedback");
	  }
	  
	  if(email != ''){
		  $("#email").addClass("has-success has-feedback");
		  $(".email").addClass("glyphicon glyphicon-ok form-control-feedback");
	  }else{
		  $("#email").addClass("has-error has-feedback");
		   $(".email").addClass("glyphicon glyphicon-remove form-control-feedback");
	  }
  
});
});

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Horizontal form: control states</h2>
  <form class="form-horizontal">
  
   <div class="form-group" id="fname">
      <label class="col-sm-2 control-label">First Name</label>
      <div class="col-sm-10">
        <input class="form-control" id="firstName" type="text" placeholder="Click to focus...">
		 <span class="fname"></span>
      </div>
    </div>
	
	<div class="form-group" id="email">
      <label class="col-sm-2 control-label">Email</label>
      <div class="col-sm-10">
        <input class="form-control" id="emailId" type="email" placeholder="Click to focus...">
		 <span class="email"></span>
      </div>
    </div>
	
	 <div class="form-group">
	  <label class="col-sm-2 control-label"></label>
		<button type="button" class="btn btn-primary" id="btn-submit">Submit</button>
     </div>
	
  </form>
</div>

</body>
</html>

我的预期输出（字段不为空且正确验证）。

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<div class="form-group has-success has-feedback">
      <label class="col-sm-2 control-label" for="inputSuccess">Input with success and glyphicon</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="inputSuccess">
        <span class="glyphicon glyphicon-ok form-control-feedback"></span>
      </div>
    </div>

【问题讨论】：

标签： jquery twitter-bootstrap-3 bootstrapvalidator

【解决方案1】：

这里的问题是您正确地添加了类，但您从未删除过之前的类。

示例：我将输入留空并单击提交... has-error 类已添加到 $("#fname") 元素。如果我随后在名字输入中输入文本并再次点击提交...现在$("#fname") 元素具有has-error 类和has-success 类。

您需要在添加has-success 类的每个实例中执行$("#fname").removeClass("has-error") 之类的操作，反之亦然。

【讨论】：