how do I get the text in an alert box to be red?
impossible with standard alert boxes …
make your own box …
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
<style type="text/css">
.titlebar{font-size:11px;
font-family:verdana;
color:white;
font-weight:bold;
width:100%;
background-color:Darkslateblue;
padding:2px;
text-align:left;
}
.msgbox{border:outset 2px white;
background-color:gainsboro;
width:300px;
height:180px;
color:black;
padding-left:1px;
padding-right:2px;
padding-top:1px;
font-family: verdana;
font-size:11px;
text-align:center
}
.cross{border:outset 2px white;
background-color:gainsboro;
left:2px;
width:18px;
color:black;
font-family:tahoma;
float:right;
margin-top:0px;
padding-left:4px;
padding-bottom:2px;
padding-top:1px;
top:0px;
line-height:10px;
cursor:pointer;
}
.bouton{width:80px;
height:25px;
border:oustet 2px silver;
position:relative;
font-size:11px;
font-family: tahoma;
}
.innerText{width:100%;
padding-left:30px;
text-align:left;
color:red;
}
#testzone {position:absolute;
top:100px;
left:200px;
}
</style>
</head>
<body>
<input type="button" onclick="document.getElementById('testzone').style.display='block';" value="alert"/>
<div id='testzone' class="msgbox" style="display:none;" >
<div class="titlebar">
<div class="cross" onclick="document.getElementById('testzone').style.display='none';">X</div> Title
</div>
<br/>
<br/>
<br/>
<div class='innerText'>
Pour poursuivre veuillez répondre à cette question:
Avez vous une toute petite boite ?
</div>
<br/>
<br/>
<br/>
<div>
<input type="button" id="trap" value="OUI" class="bouton" onclick="document.getElementById('testzone').style.display='none';" style="left:0px;"/>
<input type="button" id="trap" value="NON" class="bouton" style="left:5px;"/>
</div>
</div>
</body>
</html>
Thank you very much for the helpful script advice. Is this cross browser compatible? And will it work if called as an alert to multiple fields for form validation?
Tested with IE and firefox…
in fact it is just a div that you toggle from visible to invisible…
It can work if called from anywhere, you would only have to change message in alertbox
you could actually make a function passing the alert message as a parameter …
Thanks very much I will give it a go over the weekend and let you know how it worked.
I tried the script and it works very well. However when I tried to get the message to change according to each form field’s validation message, I am getting the error that ‘msg’ is undefined in the body of the page. Here is the script for the test page, with only 2 form fields for brevity. Unfortunately I don’t know how to link the msg in the body to the definitions in the head. ( I also don’t know how to put a code box into this message like you did, sorry)
<html>
<head>
<title>Test</title>
<script type=“text/javascript” language=“javascript”>
function validate()
{
//Check name field is not empty
var oNv=document.orderform.Name.value;
var msg=“Please enter your name”;
if (oNv==‘’) {
document.getElementById(‘testzone’).style.display=‘block’;
event.returnValue=false;
}
//Check address field is not empty
var oAv=document.orderform.Address.value;
var msg=“Please enter your address”;
if (oAv==‘’) {
document.getElementById(‘testzone’).style.display=‘block’;
event.returnValue=false;
}
}
</script>
<style type=“text/css”>
.titlebar{font-size:10pt;
font-family:verdana;
color:white;
font-weight:bold;
width:100%;
background-color:Red;
padding:2px;
text-align:left;
}
.msgbox{border:outset 2px white;
background-color:#ffffff;
width:250px;
color:black;
padding-left:1px;
padding-right:2px;
padding-top:1px;
font-family: verdana;
font-size:10pt;
text-align:center
}
.cross{border:outset 2px white;
background-color:#ECE9D8;
left:2px;
width:18px;
color:black;
font-family:tahoma;
float:right;
margin-top:0px;
padding-left:4px;
padding-bottom:2px;
padding-top:1px;
top:0px;
line-height:10px;
cursor:pointer;
}
.innerText{width:100%;
padding-left:30px;
text-align:left;
color:red;
}
#testzone {position:absolute;
top:100px;
left:200px;
}
</style>
</head>
<body>
<div id=‘testzone’ class=“msgbox” style=“display:none;” >
<div class=“titlebar”>
<div class=“cross” onclick=“document.getElementById(‘testzone’).style.display=‘none’;”>X</div> Warning !
</div>
<br/>
<div class=‘innerText’>
<script language=“javascript” type=“text/javascript”>
document.write(msg);
</script>
<br>
</div>
<div>
<input type=“button” id=“trap” value=“ok” class=“bouton” onclick=“document.getElementById(‘testzone’).style.display=‘none’;” style=“left:0px; padding:0px 1px; margin: 5px 0px;”/>
</div>
</div>
<br>
<br><form name=“orderform” onSubmit=“return validate();”>
<input type=“text” size=“40” name=“Name” value=“”>
<br>
<br><input type=“text” size=“40” name=“Address” value=“”>
<br>
<br><input type=“submit” name=“Submit” value=“Submit” >
</form>
</body></html>
I don’t know how those little faces got into my code, I didn’t put them there on purpose.
The forum software picked up some if the code that looked like the smilies code… if you use the code button (#) above the text box you type your message into you wont have that problem… highlight the script then click the code button it will appear in the post like this:
fpo hj
g sg d
gd
g dg
dg fdg
and you dont have to worry about a smily attack!
You can only use document.write() when the page is loading.
You can use document.getElementById(‘testzone’).innerHTML, which is not part of the W3C DOM but is supported by several browsers for cross-browser compatibility.
Thank you for that advice, where do I put this line, in the head or in the body, and how do I connect it to the message that I want to display?
event.returnValue is IE only. There is no reason to use it here anyway.
Try this.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled</title>
<style type="text/css">
.titlebar {
color: #fff;
font-weight:bold;
background-color: #ff0000;
padding:2px;
text-align:left;
}
.msgbox {
border:outset 2px #fff;
background-color: #fff;
width:250px;
color: #000;
font-family: verdana,tahoma,arial,helvetica,sans-serif;
font-size:10pt;
text-align:center;
}
.cross {
color: #000;
border:outset 2px #fff;
background-color:#ccc;
float:right;
margin:0;
width: 1.2em;
line-height: .8em;
padding-bottom: .2em;
cursor:pointer;
text-align:center;
}
.innerText{
padding-left:30px;
text-align:left;
color: #ff0000;
}
#testzone {
position:absolute;
top:100px;
left:200px;
}
#trap {
padding:0px 1px;
margin: 5px 0px;
}
</style>
<script type="text/javascript"><!--
function validate()
{
var msg = '';
//Check name field is not empty
var oNv=document.orderform.Name.value;
msg +="Please enter your name<br />";
if (oNv=='') {
document.getElementById('testzone').style.display='block';
}
//Check address field is not empty
var oAv=document.orderform.Address.value;
msg +="Please enter your address<br />";
if (oAv=='') {
document.getElementById('testzone').style.display='block';
}
document.getElementById('testzoneMsg').innerHTML=msg;
if(msg == '') return true;
else return false;
}
// -->
</script>
</head>
<body>
<div id='testzone' class="msgbox" style="display:none;" >
<div class="titlebar">
<div class="cross" onclick="document.getElementById('testzone').style.display='none';">x</div> Warning !
</div>
<div class='innerText' id="testzoneMsg">
</div>
<div>
<input type="button" id="trap" value="ok" class="button" onclick="document.getElementById('testzone').style.display='none';" />
</div>
</div>
<br>
<br><form name="orderform" method="post" onSubmit="return validate();">
<input type="text" size="40" name="Name" value="">
<br>
<br><input type="text" size="40" name="Address" value="">
<br>
<br><input type="submit" name="Submit" value="Submit" >
</form>
</body>
</html>
Thank you very much for your help. Unfortunately, when I tried your code, it brought all the messages up in the alert box at the same time. I tried giving the messages numbers, but that created a whole heap of other errors. I don’t know enough about javascript to see what I am doing wrong.
Nothing surprising there as you are assigning msg before testing fields …
message should be assigned in the if !!!
<script type="text/javascript">
function validate() {
var msg = '';
//Check name field is not empty
var oNv=document.orderform.Name.value;
if (oNv=='') { msg +="Please enter your name<br />"
}
//Check address field is not empty
var oAv=document.orderform.Address.value;
if (oAv=='') { msg +="Please enter your address<br />";
}
document.getElementById('testzoneMsg').innerHTML=msg;
if(msg == '') {return true};
else { document.getElementById('testzone').style.display='block';
return false; }
}
</script>
Yay! That works. Thank you so much. Now to add 25 other validation type of messages without messing it up again.
Cheers Cheryl
Oops, I guess I should have tested it by actually putting text in the fields.
Yet more proof that I’m great at making silly mistakes.
Anyway, you’re welcome, I’m glad I could help. 
Whoops I spoke too soon. It doesn’t work in firefox for me on XP, only in IE. Is the innerHTML tag just a proprietary one? If so, I don’t think I will be allowed to use it.
Here’s my brief. I have to have all these form field validations and the warning message must be written in red text. It has to be crossbrowser compliant in later browsers and the code must validate according to standards. I have the form validation working perfectly in IE 6, firefox and netscape but I have used alert box messages and after all my effort, I then found I couldn’t make the text red. That is where I came in here. Does anyone have any idea on a solution?
I would us a switch that would make your code more leagible…
hold on a sec I’ll be right back with an example …
hul well the switch would only allow you to make one correction at a time this means if there are three empty fields it would show one alert box at each validation…
here is the simplest I hav found:
<script type="text/javascript">
function validate() {
var msg = '';
var oNv=document.orderform.Name.value;
var oAv=document.orderform.Address.value;
if(oNv==''){ msg +="Please enter your name<br />";}
if(oAv==''){ msg +="Please enter your address<br />";}
if(msg == '') {return true};
else { document.getElementById('testzoneMsg').innerHTML=msg;
document.getElementById('testzone').style.display='block';
return false; }
}
</script>
The code works fine for me in Firefox 1.0.1.
In a sense, innerHTML is IE propritary, however, even though it is not part of any W3C standard Opera 7+, Netscape 6+, and Mozilla/Firefox support it.
I am still not getting this to work in firefox. I would like to show all the code I am using, but the smilies get in the way and I cannot find the place where it says to ‘add code’. I have tried the quick reply and the advanced reply and neither give me the option to ‘add code’. What am I doing wrong?
You see the “#” image in advanced reply?
Copy and paste your text into the textarea select it and then click that image.