Question

这是我的代码：

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

单击“提交”按钮时调用此函数。

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

已更新

至于你的更新问题。要使其适用于下拉列表，您唯一需要做的就是将默认的"Select State..."选项的值设置为''（空字符串）。

<强> HTML

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

javascript代码保持不变。

Answer 2

我认为问题在于<select>元素在所有浏览器中都没有value属性。

但是，您可以向<select>元素询问其选定的索引及其选项。尝试这样的事情：

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

此外，您应该确保第一个选项“选择状态...”具有value属性，并将其设置为空字符串：

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

Firefox不支持JavaScript（表单验证），但IE完全支持

2 个答案:

已更新