Question

I am trying to validate three fields in my form. The form is a simple contact me form and the JavaScript. Below is the javascript code for the validation:

 <script type="text/javascript"><!--
function validateForm() {
 with (document.contact-form) {
 var alertMsg = "The following REQUIRED fields\nhave been left empty:\n";
 if (name.value == "") alertMsg += "\nNAME IS REQUIRED";
 if (email.value == "") alertMsg += "\nEMAIL IS REQUIRED";
 if (phone.value == "") alertMsg += "\nPHONE IS REQUIRED";
 if (alertMsg != "The following REQUIRED fields\nhave been left empty:\n") {
 alert(alertMsg);
 return false;
 } else {
return true;
} } }

 // --></script>

And My HTML Code For the Form is:

  <form id="contact-form" name="contact-form" action="form.php" method="post" 
    onsubmit="return validateForm()">
<input id="name" type="name" name="name" value="NAME"  
     onfocus="if (this.value=='NAME') this.value='';" onblur="if (this.value=='') 
     this.value='NAME';"/><br />
<input id="email" type="email" name="email" value="EMAIL" onfocus="if     
    (this.value=='EMAIL') this.value='';" onblur="if (this.value=='') 
    this.value='EMAIL';" /><br />
<input id="phone" type="text" name="phone" value="PHONE" class="phone" onfocus="if 
    (this.value=='PHONE') this.value='';" onblur="if (this.value=='')   
     this.value='PHONE';" /><br />
<input type="text" name="event-location" value="EVENT LOCATION" onfocus="if  
    (this.value=='EVENT LOCATION') this.value='';" onblur="if (this.value=='')  
    this.value='EVENT LOCATION';" /><br />
<input type="text" name="event-date" value="EVENT DATE" onfocus="if  
    (this.value=='EVENT DATE') this.value='';" onblur="if (this.value=='')  
     this.value='EVENT DATE';" /><br />
<input type="text" name="event-time" value="EVENT TIME" onfocus="if  
    (this.value=='EVENT TIME') this.value='';" onblur="if (this.value=='')  
    this.value='EVENT TIME';" /><br />
<input type="text" name="message" value="MESSAGE" class="message" onfocus="if  
    (this.value=='MESSAGE') this.value='';" onblur="if (this.value=='')  
     this.value='MESSAGE';" /><br />
<input type="submit" name="send" value="SEND" />
</form>

Any Help would be highly appreciated.

Thanks

Answer 1

Try this

<script type="text/javascript"><!--
 function validateForm() {
  var mytable = document.getElementById('contact-form');
  with (mytable) {
    var alertMsg = "The following REQUIRED fields\nhave been left empty:\n";
    if (name.value == "" || name.value == "NAME") alertMsg += "\nNAME IS REQUIRED";
    if (email.value == "" || email.value == "EMAIL") alertMsg += "\nEMAIL IS REQUIRED";
    if (phone.value == "" || phone.value == "PHONE") alertMsg += "\nPHONE IS REQUIRED";
    if (alertMsg != "The following REQUIRED fields\nhave been left empty:\n") {
      alert(alertMsg);
      return false;
    } else {
      return true;
    }  } }
// --></script>

OR a little more direct

<script type="text/javascript"><!--
 function validateForm() {
  var mytable = document.getElementById('contact-form');
  var alertMsg = "The following REQUIRED fields\nhave been left empty:\n";
  if (document.getElementById('name').value == "") alertMsg += "\nNAME IS REQUIRED";
  if (document.getElementById('email').value == "") alertMsg += "\nEMAIL IS REQUIRED";
  if (document.getElementById('phone').value == "") alertMsg += "\nPHONE IS REQUIRED";
  if (alertMsg != "The following REQUIRED fields\nhave been left empty:\n") {
     alert(alertMsg);
     return false;
  } else {
     return true;
  } }
// --></script>