[英]How to display error icon inside input field using Bootstrap and jQuery?
我有一個簡單的表格Name
和Email
。 我收到正確的驗證錯誤,但沒有在輸入字段內獲得圖標。 我在右上角看到十字圖標。你能幫我解決這個問題嗎?
我需要這樣的輸出
$('#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>
只需將樣式與您的 CSS 合並並刪除重要部分。 還對您的標記進行了一些調整。
$('#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>
使用輸入組將圖標鏈接到輸入字段,然后默認隱藏跨度並將其顯示在驗證函數中。
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon"><i class="glyphicon glyphicon-times"></i></span>
</div>
工作小提琴: https : //jsfiddle.net/084w9en1/1/
使用引導程序的十字圖標
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
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.