jquery - How can give CSS for Javascript Error Message - Stack Overflow

admin管理员组

文章数量:1356808

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 e. 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 autoplete="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";}


}

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 e. 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 autoplete="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";}


}

• javascript
• jquery
• html

Share Improve this question Follow asked Mar 6, 2014 at 12:55 Dinesh KanivuDinesh Kanivu 2,58733 gold badges2525 silver badges5555 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 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 ?

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;
}

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;
}

I would remend:

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./html5-forms-input-types/

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./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 autoplete="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/JHHTw/3/

本文标签： jqueryHow can give CSS for Javascript Error MessageStack Overflow