JavaScript Forum

**ffsja** · 06-23-2008, 03:27 PM

I'm trying to get the errortxt <p> tag to show a red error when the user submits but hasn't filled out the required fields. Can anyone help with this?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="javascript" type="text/javascript">
function CheckTheForm() {
    var result = true;
    var msg="";

if (document.frmTest.name.value=="" OR document.frmTest.eml.value=="") {
     newHTML = "<span style:color = 'red'> Please fill out all required fields.</span>";
document.getElementById('errortxt').innerHTML =newHTML;
        result = false;
}
       
    if (document.frmTest.name.value=="") {
        document.getElementById('title').style.color="red";
        result = false;
       
    }
    if (document.frmTest.eml.value=="") {
            document.getElementById('eml').style.color="red";
            result = false;
            }
   

return result;

}
</script>
</head>

<body>

<form name="frmTest" method="post" action="test_form.html">
<p id="errortxt"></p>
<table width="21%" border="0">
  <tr>
    <td id="title">Name</td>
    <td><input type="text" name="name" /></td>
  </tr>
  <tr>
    <td id="eml">email</td>
    <td><input type="text" name="eml" /></td>
  </tr>
  <tr>
    <td><input type="submit" name="Submit" value="Submit" onclick="return CheckTheForm();" /></td>
    <td><input type="reset" name="Reset" value="Reset" /></td>
  </tr>
</table>
</form>
</body>

**nyef** · 06-23-2008, 05:26 PM

Change this:

Code:

<span style:color = 'red'>

to this:

Code:

<span style=\"color:red\">

**ffsja** · 06-23-2008, 07:43 PM

Thank you. I made that change but it still submits the form if the user doesn't fill out the fields. It should prevent them submitting the form if the fields aren't filled out AND print the red text at the top. Right now it does neither as far as I can tell (it submits before I can check if it prints red text).

It doesn't submit if I take this code out:

Code:

if (document.frmTest.name.value=="" OR document.frmTest.eml.value=="") {
     newHTML = "<span style:color = 'red'> Please fill out all required fields.</span>";
document.getElementById('errortxt').innerHTML =newHTML;
        result = false;
}

So I know part of the problem at least is contained in that code. Any other ideas out there?

**willcode4beer** · 06-24-2008, 02:23 AM

change "OR" to ||

**ffsja** · 06-25-2008, 12:27 PM

Thanks willcode4beer! I owe you one