How can give CSS for Javascript Error Message

Question

Here is the Demo

I am working in Javascript Validation. I want to give Separate colour for the text " Please enter Valid Email ID "

When User Enter a wrong email id and press, there is one Error message will come. I want give red colour for this Error message. Only for this Error message i need red colour

HTML

<label id="message">We don't Spam. Promise</label> <br />
<input autocomplete="on" type="text"  name="booking_email" onkeyup="validate()"   id="SignupText" class="InputSignup" placeholder="Enter Your Email" /> 
<input type="submit" value="submit" class="subButton"  onclick="submitEmail();"/>

JAVASCRIPT

function validate()
{
var booking_email = $('input[name=booking_email]').val();

if(booking_email == '' ){
  document.getElementById("message").innerHTML="We don't Spam. Promise";
}else if( /(.+)@(.+){1,}\.(.+){2,}/.test(booking_email) )
{
  document.getElementById("message").innerHTML="Your email is valid"
  if(event.which == 13){
    submitEmail();
  }
} else {
  document.getElementById("message").innerHTML="Type your email id";

  if(event.which == 13){
    submitEmail();
  }
}
}
function submitEmail()
{
var booking_email = $('input[name=booking_email]').val();
if(booking_email=="")
{

document.getElementById("message").innerHTML="Please enter Your Email ID"
}
else if( /(.+)@(.+){1,}\.(.+){2,}/.test(booking_email) )

{
alert('success');

}

else {document.getElementById("message").innerHTML="Please enter Valid Email ID";}


}

adeneo · Accepted Answer · 2014-03-06 12:57:03Z

3

just change

document.getElementById("message").innerHTML="Please enter Your Email ID"

to

document.getElementById("message").innerHTML = "<span style='color:red'>Please enter Your Email ID</span>";

wrapping the text with a span that has the color set to red ?

answered Mar 6, 2014 at 12:57

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Albzi · Accepted Answer · 2014-03-06 13:00:18Z

1

I created a JSFiddle

I wrapped a <span class='red'></span> around the text and then created a class .red in the css.

Javascript:

document.getElementById("message").innerHTML = "<span class='red'>Please enter Your Email ID</span>";

CSS

.red{
    color:red;
}

answered Mar 6, 2014 at 13:00

Albzi

15.6k6 gold badges49 silver badges67 bronze badges

Comments

Pattle · Accepted Answer · 2014-03-06 13:00:45Z

1

Whenever you print an error message you could wrap it in a div with a class or error-message

  document.getElementById("message").innerHTML="<div class='error-message'>Please enter Valid Email ID</div>";

Then in your CSS file you can do

.error-message
{
    color: red;
}

answered Mar 6, 2014 at 13:00

Pattle

6,0358 gold badges37 silver badges59 bronze badges

Comments

Mauno Vähä · Accepted Answer · 2014-03-06 13:16:17Z

1

I would recommend:

css:

.error {
  color: red;
}

and:

document.getElementById("message").innerHTML = "<span class='error'>Please enter Your Email ID</span>";

Other option would be to keep separate div for your errors and change its visibility and or text accordingly.

However, ultimate solution would be just to use correct input type.

<input type="email" name="email">

it works best as cross-device and it has error handling build in using regexp, so you can get away using those nasty javascript codes :) read more:

http://html5doctor.com/html5-forms-input-types/

edited Mar 6, 2014 at 13:16

answered Mar 6, 2014 at 13:10

Mauno Vähä

9,7883 gold badges36 silver badges55 bronze badges

Comments

King-of-IT · Accepted Answer · 2014-03-06 13:21:58Z

1

friend try this code.. i have used jquery css method which makes solution very easier.you don't need to create class and div for message.You just need to follow below code. I have used jquery css method and I have used it only in success message,but you can use it for all.Just follow the syntax.

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
function validate()
{
var booking_email = $('input[name=booking_email]').val();

if(booking_email == '' ){
  document.getElementById("message").innerHTML="We don't Spam. Promise";
}else if( /(.+)@(.+){1,}\.(.+){2,}/.test(booking_email) )
{
  document.getElementById("message").innerHTML="Your email is valid"
 $('#message').css("color","red");
  $('#message').css("font-weight","bold");

  if(event.which == 13){
    submitEmail();
  }
} else {
  document.getElementById("message").innerHTML="Type your email id";

  if(event.which == 13){
    submitEmail();
  }
}
}
function submitEmail()
{
var booking_email = $('input[name=booking_email]').val();
if(booking_email=="")
{

document.getElementById("message").innerHTML="Please enter Your Email ID"
}
else if( /(.+)@(.+){1,}\.(.+){2,}/.test(booking_email) )

{
alert('success');

}

else {document.getElementById("message").innerHTML="Please enter Valid Email ID";}


}

</script>
</head>
<body>
<label id="message">We don't Spam. Promise</label> <br />
<input autocomplete="on" type="text"  name="booking_email" onkeyup="validate()"   id="SignupText" class="InputSignup" placeholder="Enter Your Email" /> 
<input type="submit" value="submit" class="subButton"  onclick="submitEmail();"/>
</body>
</html>

here is demo

http://jsfiddle.net/JHHTw/3/

answered Mar 6, 2014 at 13:21

King-of-IT

5434 silver badges18 bronze badges

2 Comments

Dinesh Kanivu Over a year ago

thnaks for help....i already got answer. and i dont want to give color for all messages. Only Single messgae i need to give color

King-of-IT Over a year ago

@Deekey you can set any property,not only color.I have taken bold and color.You can take any of the property.

Collectives™ on Stack Overflow

How can give CSS for Javascript Error Message

5 Answers 5

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related