表单中的 javascript 验证

Question

我无法让此验证发挥作用。我正在验证是否已选择一个选择框，并且未将其保留在表单中的默认选项上。

表格:

<label for="reason">How can we help?</label>
   <select name="reas">
    <option value="Please Select">Please Select</option>
    <option value="Web Design">Web Design</option>
        <option value="branding">Branding</option>
        <option value="rwd">Responsive Web Design</option><span id="dropdown_error"></span>
  </select>

Onclick 事件:

$(document).ready(function(){
    $('#contactForm').submit(function(){
        return checkSelect();
    });
});

功能:

function checkSelect() {
    var chosen = "";
var len = document.conform.reas.length;
var i;

for (i = 0; i < len; i++){
        if (document.conform.reas[i].selected){
            chosen = document.conform.reas[i].value;
        }
 }

    if (chosen == "Please Select") {
    document.getElementById("dropdown_error").innerHTML = "No Option Chosen";
        return false;
    }
    else{
    document.getElementById("dropdown_error").innerHTML = "";
    return true;
    }
}

我也在控制台中收到此错误:

Uncaught TypeError: Cannot set property 'innerHTML' of null 

我对 javascript 很陌生，所以，我目前正在学习并尝试一些简单的示例，但我看不出是什么导致了它无法验证。

感谢任何帮助

Answer 1

首先，您的错误范围不能位于 <select> 内 。将其移至 <select> 之外HTML，这将使 JS 错误消失。

<label for="reason">How can we help?</label>
<select name="reas">
    <option value="select">Please Select</option>
    <option vlaue="Web Design">Web Design</option>
    <option vlaue="branding">Branding</option>
    <option vlaue="rwd">Responsive Web Design</option>
</select>
<span id="dropdown_error"></span>

然后，由于您已经在使用 jQuery，您可以将整个验证函数缩短为:

function checkSelect() {
    var chosen = $('select[name="reas"]').val();
    if (chosen == "select") {
        $("dropdown_error").text("No Option Chosen");
        return false;
    } else {
        $("dropdown_error").text("");
        return true;
    }
}