0

我无法让此验证正常工作。我正在验证一个选择框已被选中，并且没有留在我的表单中的默认选项上。

形式：

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

点击事件：

$(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 真的很陌生，所以，我目前正在学习和尝试一些简单的例子，但我看不出是什么导致这无法验证。

任何帮助表示赞赏

4

3 回答 3

2

首先，您不能在. <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;
    }
}
于 2012-10-04T12:36:36.267 回答
1

您的默认值为“选择”，您正在检查“请选择”。使用相同的值。

改变这个

<option value="select">Please Select</option>

至

<option value="Please Select">Please Select</option>

编辑：我会使用以下代码。要修复 javascript 问题，请确保将脚本放在关闭 body 标记之前。您的脚本在文档被解析之前执行

<label for="reason">How can we help?</label>

<select id="reas" name="reas">
    <option value="">Please Select</option>
    <option vlaue="Web Design">Web Design</option>
    <option vlaue="branding">Branding</option>
    <option vlaue="rwd">Responsive Web Design</option><span id="dropdown_error">    </span>  </option>


function checkSelect() {
    var chosen = document.getElementById["reas"].value;


    if (chosen == "") {
        document.getElementById("dropdown_error").innerHTML = "No Option Chosen";
        return false;
    }
    else{
        document.getElementById("dropdown_error").innerHTML = "";
        return true;
    }
}
于 2012-10-04T12:33:07.960 回答
1

将默认选择更改为optgroup：

<optgroup>Please Select</optgroup>

然后就无法选择了

https://developer.mozilla.org/en-US/docs/HTML/Element/optgroup

于 2012-10-04T12:33:20.363 回答