簡體   English   中英

如何使用 Bootstrap 和 jQuery 在輸入字段內顯示錯誤圖標?

[英]How to display error icon inside input field using Bootstrap and jQuery?

我有一個簡單的表格NameEmail 我收到正確的驗證錯誤,但沒有在輸入字段內獲得圖標。 我在右上角看到十字圖標。你能幫我解決這個問題嗎?

我得到輸出在此處輸入圖片說明

我需要這樣的輸出

在此處輸入圖片說明

 $('#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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM