Is it possible to style the error message?

Where does the error message come from and is it possible to style it? I looked through the other files but can’t figure this out.

For example, if I type 0 and click submit it says: “Value must be greater than or equal to 1”. Say you wanted to change the message ( for example, “Enter a number between 1 and 10”) or style it with css. Is that possible in this case?

Anything in the DOM can be given CSS properties of our liking, so yes, the message can be styled. Chances are the error messages are written in the HTML but hidden from view (with, display: none;). Dig through the HMTL and CSS and find the id or class attribute given to the element(s).

3 Likes

MDN documentation says you can change the message with JavaScript: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation#Customized_error_messages

Not sure you can change the style (font, color, margin etc.), though.

1 Like

I now know how to style the error message with JavaScript. See this article from CSS Tricks:

It’s not easy, but it’ll be a good practice to horn your JavaScript skills.

4 Likes

Sorry how do you display the “error message” text? Is it possible to do within the exercise?

Can’t say for sure without looking at the exercise. Please post a link.to that page.

Thank you for getting back me. I just saw Masakudamatsu’s article. That helped. I deleted my comment because I thought it was redundant. But here’s the link to the exercise:

https://www.codecademy.com/courses/learn-html/lessons/html-form-validation/exercises/min-max

It’s part of the Intro to Html: Set the Minimum and Maximum.

1 Like

It looks like you found your answer, but what I got from the exercise is that the HTML element will handle creating an error message for you when using the required attribute on any <input> tag.