css中的表单验证无法正常工作答案

【问题标题】：Form validation in css not working properlycss中的表单验证无法正常工作
【发布时间】：2017-12-17 18:55:12
【问题描述】：

我创建了一个注册 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。

类似的东西

但我得到的是这个：

可以做些什么来解决这个问题？

【问题讨论】：

能否请您创建一个 codepen 以便我重新创建问题？ codepen.io/pen
请创建 sn-p 演示。然后我可以帮助你

标签： jquery html css twitter-bootstrap

【解决方案1】：

您必须在 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>

FIDDLE

希望它能解决您的问题。

【讨论】：

【解决方案2】：

您不能将:before 或:after 与输入元素一起使用。因此，我在它周围包裹了一个span。这意味着输入验证需要影响相关的 span 才能显示图标。

label {
  display: block;
  font-weight: bold;
}

.error {
  position: relative;
}

.error:after {
  font-family: FontAwesome;
  content: "\f071";
  position: absolute;
  top: .1em;
  right: .2em;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<label for="name">Name</label>
<span class="error"><input name="name" type="text" placeholder="name"></span>

【讨论】：