Firefox does not support JavaScript (form validation) but IE fully support.

Question

this is my code:

function validateFormOnSubmit2(theForm) {
var reason = "";

  reason += validateState(theForm.state);        
  if (reason != "") {
    alert("State field need correction:\n" + reason);
    return false;
  }

  return true;
}

function validateState(fld) {
    var error = "";


   if (fld.value == "") {
        error = "Please Select State.\n";
        fld.style.background = 'Yellow';
    } 
    return error;
}

call this function when i click on submit button.

<form id="form2" name="form2" method="post" action="state_results.php" onsubmit="return validateFormOnSubmit2(this)">



<select name="state" id="state">
                  <option selected="selected">Select State...</option>
                  <option value="Alabama">Alabama</option>
                  <option value="Alaska">Alaska</option>
                  <option value="Arizona">Arizona</option>
                  <option value="Arkansas">Arkansas</option>
                  <option value="California">California</option>
                  <option value="Colorado">Colorado</option>
                  <option value="Connecticut">Connecticut</option>
                  <option value="Delaware">Delaware</option>
                  <option value="Florida">Florida</option>
                  <option value="Georgia">Georgia</option>
                  <option value="Hawaii">Hawaii</option>
                  <option value="Idaho">Idaho</option>
                  <option value="Illinois">Illinois</option>
                  <option value="Indiana">Indiana</option>
                  <option value="Iowa">Iowa</option>
                  <option value="Kansas">Kansas</option>
                  <option value="Kentucky">Kentucky</option>
                  <option value="Louisiana">Louisiana</option>
                  <option value="Maine">Maine</option>
                  <option value="Maryland">Maryland</option>
                  <option value="Massachusetts">Massachusetts</option>
                  <option value="Michigan">Michigan</option>
                  <option value="Minnesota">Minnesota</option>
                  <option value="Mississippi">Mississippi</option>
                  <option value="Missouri">Missouri</option>
                  <option value="Montana">Montana</option>
                  <option value="Nebraska">Nebraska</option>
                  <option value="Nevada">Nevada</option>
                  <option value="New Hampshire">New Hampshire</option>
                  <option value="New Jersey">New Jersey</option>
                  <option value="New Mexico">New Mexico</option>
                  <option value="New York">New York</option>
                  <option value="North Carolina">North Carolina</option>
                  <option value="North Dakota">North Dakota</option>
                  <option value="Ohio">Ohio</option>
                  <option value="Oklahoma">Oklahoma</option>
                  <option value="Oregon">Oregon</option>
                  <option value="Pennsylvania">Pennsylvania</option>
                  <option value="Rhode Island">Rhode Island</option>
                  <option value="South Carolina">South Carolina</option>
                  <option value="South Dakota">South Dakota</option>
                  <option value="Tennessee">Tennessee</option>
                  <option value="Texas">Texas</option>
                  <option value="Utah">Utah</option>
                  <option value="Vermont">Vermont</option>
                  <option value="Virginia">Virginia</option>
                  <option value="Washington">Washington</option>
                  <option value="West Virginia">West Virginia</option>
                  <option value="Wisconsin">Wisconsin</option>
                  <option value="Wyoming">Wyoming</option>
                </select>

<input name="submit2" type="submit" id="submit2" value="Search!" />

Answer 1

function validateFormOnSubmit2(theForm) {
  var reason = validateState(theForm.state);
  if (reason) { // if there is a reason
    alert("State field need correction:\n" + reason);
    return false;
  }
  return true;
}

function validateState(field) {
   if (field.value == "") {
       field.style.background = 'Yellow';
       return "Please Select State.\n";
   }
   // returns undefined by default
   // means: there is no reason
   // (the reason is not defined)
}

---

UPDATED

As for your updated question. The only thing you need to do in order to get it work for dropdowns, is to set the default "Select State..." option's value to '' (empty string).

HTML

<option selected="selected" value="">Select State...</option>

The javascript code stays the same.

Answer 2

I believe that the problem is that <select> elements do not have a value attribute in all browsers.

You can, however, ask the <select> element for its selected index, and for its options. try something like this:

function validateState(fld) {
    var error = "";
    var value = fld.options[fld.selectedIndex].value;

   if (value == "") {
        error = "Please Select State.\n";
        fld.style.background = 'Yellow';
    } 
    return error;
}

In addition, you should be sure that the first option "Select State..." has a value attribute, and set it to the empty string:

<option selected="selected" value="">Select State...</option>