JavaScript Form validation in IE

Question

Hi all I am working on a contact or phone book application. So currently I am working on searching for records. Now I have this form with certain elements/fields being required or mandatory while others are optional.

So I wrote a very simple javascript function to check if those required fields are missing or not. It works greate on firefox and chrome however not in IE.

It seems that the if clause is failing in my js in IE because wheather i enter the required fields or don't enter the required fields i get the alert message telling me to enter the rquired fields. Mind you this doesn't happen in firefox only IE. So I'll put some relevant code bits here for you to have a look hoping you can help me out here:

head

some css code

...

<script type="text/javascript">

function disp_confirm()

{

  if (document.contractor_phonebook_form.Service.value == "" || document.....etc.)

  {

    javascript:alert('Please enter all necessary fields!');  

    return false;

  }

  else

  {

     return true;

  }


 }


 </script>

 end of head beginning of body


 <form action='<?php $PHP_SELF; ?>' method='post' name="contractor_phonebook_form" target="_self" onSbumit="return disp_confirm()">

some of the form elements are autofilled from a database query using mysql and php to fill the form elements. while others are simple drop down menus.

  <select name="Service">
  ... etc.. 

hopefully you have an idea of what i have here and why does IE always give me the alert message please fill in the required fields wheahter I ENTER OR DON'T ENTER any form fields..

thank you in advance again..

Answer 1

You should be calling alert like a normal function, without writing javascript: first.

However, your problem is that IE implements the value property for select elements differently.

You need to check whether any of the options' selected property is true.

This is easiest to do using jQuery, like this:

if ($('#service').val() === ""
 || $('#somethingElse').val() === "") {
    alert("Please enter all necessary fields.");
    return false;
} else
    return true;

Answer 2

There is a nice jQuery cross browser solution and provides validation for email addresses, dates, other common functions. You can define a common div where your errors can be displayed.

I've used this with Asp.net and had little trouble adapting it to my needs. There are quite a few users here at SO that have used this solution.

Answer 3

OKAY I found the answer to my problem... Most browsers would detect the value of the option fields automatically meaning what I originally had was this:

 <select name ="Service">

   <option>NOCC</option>
   <option>HVAC</option>
   ....etc.
 </select>

however IE was always getting null values since I didn't explicitly specify the value attribute to the element tag. So all I did was change my code from that on top to the following:

  <select name="Service">
     <option value="NOCC">NOCC</option>
     <option value="HVAC">HVAC</option>
     ....etc..
  </select>

and now works fine in IE. Strange enough most browsers are able to detect the value attribute by looking at the option tag display however IE requires that you specifically define the value attribute otherwise will look at it as blank or null. and that's why my if clause was failing in IE because i didn't specify the value attribute and hence it was always blank even when I did choose a value from the drop down menu it still saw it as blank.

thank you all for your help I definately benefited by learning something new from your posts like JQuery.

cheers

Answer 4

You dont need to put javascript: before your alert(); function.