用于选择下拉列表的单个验证脚本

Question

我正在创建一个用户表单。在这里我有文本框和很多选择下拉列表。 提交后，我通过 $_POST 将所有值发送到数据库。我的表单是这样的：

     <tr>
         <td>Review Employee Id</td>
         <td><input type="text" name="rcode" id="rcode"  class="genInputBox" /></td>
     </tr>
     <tr>
         <td>Quality of Delivery</td>
         <td>
              <select name="qd" id="qd">
                <option value="">Plz Select Ratting </option>
                <option value="5">5</option>
                <option value="4">4</option>
                <option value="3">3</option>
                <option value="2">2</option>
                <option value="1">1</option>
              </select>
         </td>
      </tr>

还有更多选择框.........

对于我正在使用的选择框验证，

   var qd = document.product.qd.options[document.product.qd.selectedIndex].value;
       if (qd == "") {
           error_message = error_message + "Please select Rating In domain Knowledge\n";
           error = 1;
       }

我在表单中提到了很多选择框。所以我的问题是我可以对所有选择框使用单个选择框验证脚本吗？

我以这种方式使用这个答案

var sels = document.product.getElementsByTagName("select");
for (var i=0,n=sels.length;i<n;i++) {
  if (sels[i].selectedIndex<1) {
    alert(sels[i].options[0]); // alerts Plz Select whatever
    sels[i].focus();

  error_message = error_message + "Please select drop down\n";
   error = 1; }
}
   if (error == 1) {
    alert(error_message);
    return false;
    } else {
    return true;
    }

}

但现在如果只剩下 1 个单选下拉列表而不进行检查，那么它会显示选择框的 10 条错误消息。

Answer 1

像这样 - 简单的 JS -

window.onload=function() {
  var form = document.getElementsByTagName("form")[0]; // assuming first form on page
  form.onsubmit=function() {
    var sels = form.getElementsByTagName("select");
    for (var i=0,n=sels.length;i<n;i++) {
      if (sels[i].selectedIndex<1) {
        alert(sels[i].options[0]); // alerts Plz Select whatever
        sels[i].focus();
        return false; // disallow submit
      }
    }
    return true; // allow submission
  }
}

Answer 2

是的，你可以，例如：

var firstSelectLen = document.product.qd.length;
var secondSelectLen = document.product.qd1.length; // and so on for all selects you have
//then loop with lengths to check if any selected
//and show error msg accordingly

希望有帮助