如何給CSS Javascript的錯誤消息

我在的Javascript驗證工作。我想給單獨的顏色文本 「請輸入有效的電子郵件ID」

當用戶輸入一個wrong email id並按，有一個錯誤消息會出現。我想爲此錯誤消息提供紅色。僅此錯誤信息，我需要紅色

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


}

來源

2014-03-06 Dinesh Kanivu

只是改變

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

到

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

使用顏色設置爲紅色的跨度包裝文本？

來源

2014-03-06 12:57:03 adeneo

thanks..very多 –

我創建了一個JSFiddle

我纏的文本<span class='red'></span>，然後在CSS創建一個類.red。

的Javascript：

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

CSS

.red{ 
    color:red; 
}

來源

2014-03-06 13:00:18 Albzi

當你打印一個錯誤信息，你可以用一個類包裝在一個div或error-message

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

在你的CSS

然後文件你可以做

.error-message 
{ 
    color: red; 
}

來源

2014-03-06 13:00:45 Pattle

我會建議：

CSS：

.error { 
    color: red; 
}

和：

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

其他選項將是保持獨立的DIV爲你的錯誤，並改變其知名度和或文本因此。

但是，最終的解決方案只是使用正確的輸入類型。

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

它最適合跨設備，並使用正則表達式有錯誤處理的構建，這樣你就可以擺脫使用那些討厭的JavaScript代碼:)閱讀更多：

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

來源

2014-03-06 13:10:46

朋友嘗試這段代碼..我已經使用jquery css方法，這使得解決方案變得非常容易。你不需要爲消息創建類和div。你只需要遵循下面的代碼。我已經使用jQuery的css方法，我只用它成功的消息，但你可以使用它的所有。只需遵循語法。

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

這裏是演示

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

來源

2014-03-06 13:21:58

thnaks幫忙....我已經有了答案。我不想給所有消息提供顏色。只有一個messgae我需要給顏色 –

@Deekey你可以設置任何屬性，不僅color.I採取了大膽和color.You可以採取任何屬性。 –

如何給CSS Javascript的錯誤消息

回答

相關問題