Displaying a font awesome icon within a textbox

Whenever a user focuses out of a textbox, I am checking if the email address is already registered. If it's not registered, I want to display a checkmark symbol (the correct Font Awesome symbol) on the right side of the text box. If it is registered, then I want to show a cross symbol.

This is what I have tried:

HTML

<div class="col-md-6 col-lg-6">
  <input type="text" name="user.mailId" id="mailid" placeholder="Mail Id" class="form-control rgn"/>
  </div>

JQuery

$(document).on('focusout', '#mailid', function (event) {
  $('#mailid').addClass('availablle');
  });

CSS

.availablle {
  position:relative;
  } 
  .available:before {
  content: "&#xf00c"; 
  font-family: FontAwesome;
  left:-5px;
  position:absolute;
  top:0;
  color:green;
  }

You can find my code here. I found guidance from this source.

jqueryhtmlcss

Answer №1

It seems like the solution you are seeking is already integrated into Bootstrap (assuming that you are utilizing it based on your jsfiddle).

You can find more information here: http://getbootstrap.com/css/#forms-control-validation

If you prefer to use Font Awesome icons instead of Bootstrap glyphicons, I have provided an alternative option below. It simply involves swapping out the icons.

http://codepen.io/Mkapin/pen/XpKbLM?editors=1100

glyphicon glyphicon-ok --> fa fa-check 

  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess2">Input with success</label>
    <input type="text" class="form-control">
    <span class="fa fa-check form-control-feedback"></span>
    <span id="inputSuccess2Status" class="sr-only">(success)</span>
  </div>

Answer №2

Unable to utilize :before and :after pseudo-elements with input elements. Create a new element and assign the "available" class to it instead.

Answer №4

I attempted to implement the following code snippet:

<div class="form-group">
  <label class="col-md-4 col-lg-4 control-label" for="user.mailId">Email Address</label>
  <div class="col-md-6 col-lg-6">
    <input type="email" name="user.mailId" id="mailid" placeholder="Email Address" class="form-control email-input" />
  </div>
</div>

 $(document).on('focusout', '#mailid', function(event) {
    $('#mailid').closest('.form-group').addClass('has-success').addClass("has-feedback");
    $('#mailid').after('<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>');

  });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Positioning an element absolutely inside a Material-UI React dialog

Currently, I am working on a Dialog component that includes a button located in the bottom right corner. When this button is clicked, it triggers the display of another div containing a list of items. However, I have encountered an issue where the list is ...

cssreactjsmodal-dialogmaterial-ui

refresh a distinct area of a webpage

Currently, I am working with PHP, AJAX, and jQuery. When posting a status, the update is done using AJAX and PHP to avoid full page reloading. However, I am facing an issue where I want the newly posted status to be visible alongside the existing statuses. ...

phpjquerymysqlajax

What caused the slide show to malfunction during the live preview?

1-Why is the slide show not working in the live preview? It works on my desktop, but when I share it in the live preview, it doesn't work. <div class="slide-show-content"><!-- /image gallery slideshow--> <div class="slide-show-default ...

jqueryhtmlcss

Reposition all other elements of the HTML body after collapsing the Bootstrap section

I am facing an issue with Bootstrap where every time I click on a collapse element, the rest of the body moves up or down. Is there a way to prevent this from happening? Here is an example of my code: <body> <div class="panel-group"> ...

htmltwitter-bootstrap

jQuery doesn't have the capability to convert this data into JSON format

I have some code that I want to convert into JSON format: var locationData = []; locationData['lat'] = position.coords.latitude; locationData['long'] = position.coords.longitude; locationData['address']['road'] = da ...

jqueryarraysjson

Color box and scroller

I am encountering an issue with colorbox when loading content for the first time after opening the page. I created a list of people with button descriptions for each person. When a button is clicked, it opens a colorbox "window" displaying information fetc ...

jquerycolorboxscroller

What is the process for modifying the design of an NPM package?

I may have a silly or incorrect question, but what exactly is the extent of default styling in an NPM package? If I am using an NPM package and wish to adjust the color of one of their elements, how should I go about it? In both my own index.css file and ...

cssreactjsnpm

What advantages and disadvantages come with using AJAX requests to fetch an HTML page as opposed to utilizing window.location or a hyperlink to navigate to the page?

I have been exploring the various techniques for switching pages in a web browser. Here is what I have gathered so far: Using anchor tags <a href = "#">...</a> allows redirection with text and images (non-buttons) Button elements lik ...

jqueryajaxexpressbuttonresponse

Encountered a parsing error when attempting to integrate SCSS with webpack and babel setup

I am facing an issue while trying to integrate SCSS into my webpack and babel setup. When running npm run build, I encounter an error that I'm unfamiliar with. As a beginner in using webpack and babel, I'm unsure about the necessary changes requ ...

javascriptcsswebpacksassbabeljs

What methods are available to show varying text based on the selection in a drop down menu?

Consider this scenario: when the user selects "boy", the text "Tom" will be displayed below. Alternatively, if the user chooses "girl", the text "Ava" will appear. ...

html

The wonders of jQuery popup windows

A code was discovered that displays a popup, but it currently relies on transparency (opacity: 0). I would like to modify it to use display: none instead, as the transparent window in the center of my website is causing issues. Here is the JavaScript code ...

javascriptphpjquerycss

Keep the animation keyframes looping endlessly

I am creating a countdown timer circle. The animation functions properly on the initial iteration, however, the circle animation remains full after the first iteration and does not reset. Despite this, the countdown number continues to function correctly, ...

javascriptcssreactjscss-animationscountdown

The JQuery datepicker fails to display the current date

I am experiencing an issue with the datepicker on my webpage. While it is working correctly, the default date being displayed is '01/01/2001' instead of '11/23/2012', as I intended. Here is the jquery code I am using: $(":inpu ...

javascriptjqueryasp.netjquery-ui

Enabling draggable functionality for divs using JSPlumb and a toggle button

http://jsfiddle.net/taoist/fsmX7/ The scenario presented in the code snippet above involves toggling the draggable state of the .textDivContainer element based on user interaction. The desired behavior is for the element to be non-draggable by default, an ...

javascriptjqueryjsplumb

When a height is specified in percentage, the Tbody element does not display correctly on the entire page

Hey there! Currently, I am working on a fixed header table. My goal is to create a table where the tbody section expands with the screen size and I would like to set the height in percentage (%) but unfortunately it doesn't seem to be functioning as e ...

htmlcsshtml-table

Seeking guidance on leveraging the jQuery each function for an associative multidimensional array. Any tips or suggestions would

My current task involves working on a jQuery code snippet using the .get method to send a value to the server for comparison with an array. The result will then be encoded into JSON format as responses. Below is the sample code (utilizing jQuery and PHP ...

phpjquerymultidimensional-arrayassociative-array

Mozilla Firefox experiencing crashes while rendering an extensive HTML table with over 20,000 rows

While attempting to render a table with over 20,000 rows, I noticed that Firefox crashes while other browsers handle it without issue. The table is generated using ASP.NET and written directly to the buffer with Response.Write. Swapping out the direct HTML ...

htmlasp.netfirefoxhtml-table

Ensure that the control button is pressed during the JavaScript onclick event function

I am looking to create a JavaScript function that checks if the CTRL button is pressed. Here is my PHP code: <tr class="clickable" onclick="gotolink('<?= base_url() . invoices/createinvoice/' . $customer->Id; ?>')"> And here ...

javascriptphphtmlfunction

When utilizing the HTML select element, the <option> tag may only display the initial letter of the chosen option

Here is a snippet of my PHP code: <?php if($_POST['post'] == 'Post') { $cat = $_POST['cat']; $update = "UPDATE table SET category='$cat' WHERE id = '$id' "; $result = mys ...

htmlhtml-select

CSS: Apply unique padding to the last element without the use of additional classes

My challenge involves a div housing three images, each about 31% in width. The goal is to have padding between them, with the final image having no right padding so that collectively they match the width of a larger image above. Here's an example... ...

htmlcss