Firefox ne prend pas en charge JavaScript (validation de formulaire) mais IE le prend entièrement en charge.

Question

Voici mon 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;
}

Appeler cette fonction lorsque je clique sur le bouton "submit".

<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)
}

---

MISE À JOUR

Pour ce qui est de votre question actualisée. La seule chose que vous devez faire pour que cela fonctionne pour les listes déroulantes, c'est de définir la valeur par défaut de l'option "Select State..." à '' (chaîne vide).

HTML

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

Le code javascript reste le même.

Answer 2

Je pense que le problème est que <select> n'ont pas d'élément value dans tous les navigateurs.

Vous pouvez toutefois demander au <select> pour son index sélectionné et pour ses options. essayez quelque chose comme ceci :

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;
}

En outre, vous devez vous assurer que la première option "Select State..." a une valeur de value et lui donner la valeur d'une chaîne vide :

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