Replace the placeholder text with an icon

I am having trouble changing the placeholder text using a function. I am unable to add any additional code to style the text, such as making it bold or adding an icon next to it. When I try to do so, the code is displayed as text instead of being executed. Here is the code snippet I am using:

$('#email').attr('placeholder', '<i class="fa fa-times" aria-hidden="true"></i> Invalid email.')

Instead of displaying the icon and text styled as intended, it shows the code itself: 

"<i class="fa fa-times" aria-hidden="true"></i> Invalid email"
. I have also attempted to use CSS and HTML functions to style the placeholder text, but they do not work. The only function that successfully changes the placeholder text for me is the attr method.

javascriptjqueryhtmlcss

Answer №1

If you simply want to update the appearance after submitting, one potential solution is to utilize stacked HTML components to showcase the icon. By adjusting the padding in the input field, you can create space for the icon and present it as a distinct element displayed at a superior z-index. Numerous guides are available for integrating icons into inputs using this approach.

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

How can I dynamically update a React/Next.js page as the server completes different stages of a complex action?

Currently, my aim is to develop a single-page application that relies on one major back-end process. This procedure is initiated by a singular string input. The various stages involved and the outcomes are as follows: It takes about 20ms to display/render ...

javascriptreactjsnext.jsserver-action

Show a pop-up notification when the mouse passes over a word in the text

I've been grappling with this issue for days now and could really use some guidance. Despite scouring the web, I'm unsure if I've approached it correctly. What I'm trying to achieve is having an alert box pop up each time a user hovers ...

javascripthtml

Redirecting users based on their type - Vue router

Seeking assistance as a novice in vue. Building an app with firebase-connected login. Want to utilize vue-router for user redirections. Goal: Redirect "admin" users to "/admin", others to "/", and non-logged-in users to "/login". Sharing parts of my code: ...

javascriptfirebasevue.jsfirebase-authenticationvue-router

Safari 15.6.1 does not support background video playback in Next.js

Currently using Safari version 15.6.1 for a small website project, I have encountered an issue where the video appears frozen with an arrow in the middle. Oddly enough, this problem only occurs on Safari as both Chrome and Firefox display the code correctl ...

javascripthtmlnext.jssafari

Exploring the art of CSS box-shadow and playing with margins

In one of my blog posts, I've applied CSS box-shadow to the <img> elements. To ensure that they adjust their size along with the column, I have set max-width:100%. However, the box-shadow spills over into the margins due to its rendering outsid ...

layoutmargincss

What's the reason behind express-rate-limit not performing as anticipated?

There seems to be an issue with the enforcement of the rate limit I specify in my code. Instead of lasting for 35 minutes as intended, it only lasts for about 20 seconds. Additionally, continuously making requests seems to reset the time limit, which is un ...

javascriptnode.jsexpressexpress-rate-limit

Troubleshooting Highcharts container selection problem on Nexus 7 running version 4.2.1

Having a problem with Highcharts on my Nexus 7. When I touch the chart, the entire thing gets selected with a blue overlay, but this doesn't happen on other devices like the Nexus 4. Even when I try accessing demos from Highcharts website, the issue ...

javascriptandroidhtmlhighchartscordova

What could be preventing this AJAX call from running correctly?

I am in the process of developing a website that provides users with a discount based on a promotional code they can input. It is important for me to verify the validity of the code in our database before allowing a new sign-up to proceed. Below is the AJA ...

javascriptphpajaxpost

What is the best way to conceal the URL of a link leading to a file?

My website is built with C#, Kendo MVC, Razor and features a Kendo grid where one of the cells contains a hyperlink to a PDF file. The issue I'm facing is that when users click on the link, the URL is visible in the browser and can be altered to acces ...

htmlasp.net-mvchyperlinkkendo-uidownload

Transforming global CSS into CSS modules: A step-by-step guide

In my nextjs project, I am utilizing react-bootstrap and bootstrap which requires me to include the global css: // _app.js import 'bootstrap/dist/css/bootstrap.min.css'; The issue arises when loading a significant amount of unused css on every p ...

cssreactjswebpackbootstrap-4next.js

Using a React component to send data through a POST request to an API

When attempting to send a selected value from a Dropdown to an API using a POST request, I keep encountering a 405 (Method Not Allowed) error. Despite trying different ways to handle the onChange event, such as: onChange{(e) => this.onChangeHandler(e.t ...

javascriptreactjs

Simple JavaScript timer with loop and pause

Having trouble with a countdown script and encountering multiple issues. The script does not run smoothly Difficult to make it repeat (closure) Struggling with delaying the start and repeat (closure) Seeking assistance in fixing this code which should i ...

javascriptsettimeoutsetinterval

Obtaining the file size on the client side using JSF RichFaces file upload

I am currently using version 4.3.2 of rich fileupload in JSF richfaces. The issue I am facing is that the files first get uploaded to the server and then an error is thrown if the file size exceeds a certain limit. Even though I have set a size restriction ...

javascriptfile-uploadjsf-2richfaces

Leveraging aws-sdk within a TypeScript, jQuery, and webpack application

Greetings! I have a TypeScript/jQuery/Webpack application with all the latest releases, and everything seems to be functioning properly. Now, I am attempting to integrate the aws-sdk into it. I followed the same approach I used for importing other librarie ...

jquerytypescriptwebpackaws-sdk

What is the best way to place this dropdown in a fixed position within a parent element with overflow scrolling

I am facing an issue with a dropdown menu inside a parent div. The parent div has a fixed height and is set to overflow: auto. My goal is to have the menu extend beyond the boundaries of the parent when opened, but currently it just increases the height of ...

htmlcss

Can I use jQuery to fetch a PHP variable?

Is there a way to extract a PHP variable from jQuery? Let's say I am using the jQuery POST function like this: $.post("login.php", {username:username, password:password}, function(data){ $('section').html(data); }); Rather than displa ...

phpvariablesjquery

Ways to modify the color of cells in a table generated from JSON

In developing an HTML table based on JSON data, I have created a university semester map that displays student information including their ID, year, term, and required courses for graduation. While the table is successfully created, I aim to customize the ...

javascriptphphtmlmysql

Is it beneficial to utilize jQuery ahead of the script inclusions?

While working on a PHP project, I encountered a situation where some parts of the code were implemented by others. All JavaScript scripts are loaded in a file called footer, which indicates the end of the HTML content. This presents a challenge when tryi ...

javascriptjquery

Encountering a 'unknown column' error while using MySQL on a Windows operating system

A query is being executed on Node.Js with MySQL, resulting in the following: SELECT COUNT(DISTINCT t.uid) AS usersCount, COUNT(*) AS workingDaysCount FROM ( SELECT d.date, u.id AS uid, CASE TIMESTAMPDIFF(day, SUBDATE(d.date, WEEKDAY(d.date) ...

javascriptmysqlsqlnode.js

Create a script that ensures my website can be set as the homepage on any internet browser

I am currently in search of a way to prompt users on my website to set it as their homepage. Upon clicking "Yes," I would like to execute a script that will automatically make my website the user's browser homepage. I have come across a Similar Thread ...

javascriptjqueryhtml