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

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>