我创建了一个注册 html 页面，我试图在其中基于表单验证向文本字段添加效果。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.css">
<!-- Optional theme -->
<link rel="stylesheet" href="css/bootstrap-theme.css">
<script src="js/jquery.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.js"></script>
<!-- <script src="js/FormValidation.js"></script> -->
<script src="https://use.fontawesome.com/b1af24592c.js"></script>
</head>
<body>
<div>
<div class="col-md-3">
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 style="text-align:center"><a style="text-decoration:none; color:#000000;" href="index.html">Form</a></h3>
</div>
<div class="panel-body">
<form>
<div class="form-group has-feedback has-warning">
<label>First Name</label>
<input type="text" placeholder="Your first name" class="form-control" id="firstName" required>
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-feedback has-success">
<label>Last Name</label>
<input type="text" placeholder="Your last name" class="form-control" id="lastName" required>
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group">
<label>Email</label>
<input type="text" placeholder="Your email id" class="form-control" id="email" required>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" placeholder="Password" class="form-control" id="password" required>
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="password" placeholder="Confirm your password" class="form-control" id="confirmPassword" required>[![enter image description here][1]][1]
</div>
</form>
</div>
<div class="panel-footer">
<button class="btn btn-info btn-block">Register</button>
<h6>Already a user? <a href="#" data-toggle="modal" data-target="#modal-signin">Sign In</a></h6>
</div>
</div>
</div>
</div>
</body>
</html>
在页面中，我想在文本框中添加 glyphicon-ok 和 glyphicon-warning。
像这样
但我得到的是这个:
如何解决这个问题？
最佳答案
你必须将类放在 label 上，并将 input 和 icon span 放入 div 中，如下所示:
<div class="form-group has-feedback">
<label for="fname" class="control-label col-md-6">First Name:</label>
<div class="col-md-6">
<input type="text" name="fname" id="fname" class="form-control" placeholder="Enter first name" />
<span class="glyphicon form-control-feedback" id="fname1"></span>
</div>
</div>
希望它能解决您的问题。
关于jquery - css 中的表单验证无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45073040/