如何使用 Bootstrap 和 jQuery 在输入字段内显示错误图标？

Question

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 am getting output

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>

Answer 1

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>

Answer 2

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/

Answer 3

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
 }