Form validation in css not working as expected
I have created an html registration page in which I am trying to add effects to text fields based on form validation.
<!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>
On the page, I want to add glyphicon-ok and glyphicon-warning to the textbox.
Something like that
But I am getting the following:
What can be done to solve this problem?
source to share
you need to put the class on label
and put input
and icon span
on div
as shown below:
<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>
hope it solves your problem.
source to share
You cannot use :before
or :after
with an input element. So I wrapped it around it span
. This means that input validation must affect the appropriate range for the icon to display.
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>
source to share