Question

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

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

＆＃13;

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

＆＃13;

<!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>

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

这里的问题是你正确地添加了类，但是你永远不会删除以前的类。

实施例：我将输入留空并单击提交... has-error类已添加到$("#fname")元素。如果我然后在firstname输入中输入文本并再次点击提交...现在$("#fname")元素包含has-error类和has-success类。

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

Bootstrap验证器和正确的表单字段验证

1 个答案: