I have a simple form, Name
and Email
. I am getting validation error proper but not getting icon inside the input field. I am getting cross icon top right corner.Would you help me out in this?
I need output like this
$('#myform').validate({ rules: { name: { minlength: 3, maxlength: 15, required: true }, email: { required: true, email: true }, }, highlight: function(element) { var id_attr = "#" + $( element ).attr("id") + "1"; $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); $(id_attr).removeClass('glyphicon-ok').addClass('glyphicon-remove'); }, unhighlight: function(element) { var id_attr = "#" + $( element ).attr("id") + "1"; $(element).closest('.form-group').removeClass('has-error').addClass('has-success'); $(id_attr).removeClass('glyphicon-remove').addClass('glyphicon-ok'); }, errorElement: 'span', errorClass: 'help-block', errorPlacement: function(error, element) { if(element.length) { error.insertAfter(element); } else { error.insertAfter(element); } } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js" type="text/javascript"></script> <form class="form-horizontal" id="myform"> <input type="text" name="name" placeholder="name" id="name"> <span class="glyphicon form-control-feedback" id="name1"></span> <input type="email" name="email" id="email" placeholder="email"><span id="status"></span> <span class="glyphicon form-control-feedback" id="email1"></span> </form>
Just merge the styling with your CSS and remove the important part. Also a little tweak in your markup.
$('#myform').validate({ rules: { name: { minlength: 3, maxlength: 15, required: true }, email: { required: true, email: true }, }, highlight: function(element) { var id_attr = "#" + $( element ).attr("id") + "1"; $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); $(id_attr).removeClass('glyphicon-ok').addClass('glyphicon-remove'); }, unhighlight: function(element) { var id_attr = "#" + $( element ).attr("id") + "1"; $(element).closest('.form-group').removeClass('has-error').addClass('has-success'); $(id_attr).removeClass('glyphicon-remove').addClass('glyphicon-ok'); }, errorElement: 'span', errorClass: 'help-block', errorPlacement: function(error, element) { if(element.length) { error.insertAfter(element); } else { error.insertAfter(element); } } });
.field-container { float: left; position: relative; } .form-control-feedback { line-height: 20px; font-size: 20px; line-height: 20px !important; height: 20px !important; } .glyphicon-ok { color: #4FAC34; } .glyphicon-remove { color: #FF0000; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js" type="text/javascript"></script> <form class="form-horizontal" id="myform"> <div class="field-container"> <input type="text" name="name" placeholder="name" id="name"> <span class="glyphicon form-control-feedback" id="name1">x</span> </div> <div class="field-container"> <input type="email" name="email" id="email" placeholder="email"><span id="status"></span> <span class="glyphicon form-control-feedback" id="email1">x</span> </div> </form>
Use input-groups to link an icon to an inputfield, then just hide the span by default and show it in your validation function.
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon"><i class="glyphicon glyphicon-times"></i></span>
</div>
Working fiddle: https://jsfiddle.net/084w9en1/1/
Use cross icon of bootstrap
HTML:
<div class="form-group">
<input type="text" name="name" placeholder="name" id="name">
<span class="glyphicon glyphicon-remove cross" aria-hidden="true"></span>
</div>
CSS:
.form-group{
position:relative;
}
span.glyphicon-remove.cross{
position: absolute;
transform: translate(-50%, -50%);
top: 50%;// put the proper position of that cross from top
right: 0;// put the proper position of that cross from right
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.