强制下拉问题答案

【问题标题】：Mandatory drop down problems强制下拉问题
【发布时间】：2012-01-11 22:48:34
【问题描述】：

我有一个包含几个必填字段的表单，除了下拉列表之外，所有字段都有效。

我正在使用此代码检查字段：

function formCheck(formobj){
    // Enter name of mandatory fields
    var fieldRequired = Array("name", "country", "email", "tel");
    // Enter field description to appear in the dialog box
    var fieldDescription = Array("Name", "Country", "Email", "Telephone");
    // dialog message
    var alertMsg = "Please complete the following fields:\n";

    var l_Msg = alertMsg.length;

    for (var i = 0; i < fieldRequired.length; i++){
        var obj = formobj.elements[fieldRequired[i]];
        if (obj){
            switch(obj.type){
            case "select-one":
                if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == ""){
                    alertMsg += " - " + fieldDescription[i] + "\n";
                }
                break;
            case "select-multiple":
                if (obj.selectedIndex == -1){
                    alertMsg += " - " + fieldDescription[i] + "\n";
                }
                break;
            case "text":
            case "textarea":
                if (obj.value == "" || obj.value == null){
                    alertMsg += " - " + fieldDescription[i] + "\n";
                }
                break;
            default:
            }
            if (obj.type == undefined){
                var blnchecked = false;
                for (var j = 0; j < obj.length; j++){
                    if (obj[j].checked){
                        blnchecked = true;
                    }
                }
                if (!blnchecked){
                    alertMsg += " - " + fieldDescription[i] + "\n";
                }
            }
        }
    }

    if (alertMsg.length == l_Msg){
        return true;
    }else{
        alert(alertMsg);
        return false;
    }
}

这是我用于下拉菜单的代码：

<select name="country" id="country">
                        <option value="" disabled="disabled">Please select your country</option>
                        <option value="United Kingdom">United Kingdom</option>
                        <option value="United States">United States</option>
...

让用户选择一个国家而不是让他们将其留在“请选择您的国家”并且什么都不返回，我缺少什么？

【问题讨论】：

与其重新发明轮子，我建议你使用像 jQuery 这样的 javascript 库。您将获得处理跨浏览器差异的可靠、健壮的代码。
@RedFilter：更不用说整个代码块可能会减少到 10 个 LLOC。

标签： javascript html forms

【解决方案1】：

对于您的示例，此代码将始终为 true：

obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == ""

两者都将评估为真。尝试将其更改为：

obj.selectedIndex == 0

【讨论】：

【解决方案2】：

HTML 中的 selectedIndex 属性从 0 开始。(http://www.w3schools.com/jsref/prop_select_selectedindex.asp)

这意味着它永远不会像您期望的那样是-1。

您必须将它与索引 0 或更好的值进行比较，比较值，如果它是空字符串，则显示错误消息。

现在您比较的是 text 属性，而不是选项的 value 属性。

【讨论】：

【解决方案3】：

这条线可能是罪魁祸首：

if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == "") ...

它首先检查所选索引是否为-1，或者所选项目的text 是否为空。假设您将“请选择...”作为默认选项，您将始终在任何选定项目上使用text。该选项有一个空的value，而不是text 属性。所以我认为你在比较错误的财产。另外，第一个元素的索引为0，所以索引比较不正确。

尝试将其更改为：

if (obj.selectedIndex < 1 || obj.options[obj.selectedIndex].value == "") ...

【讨论】：

它仍然没有显示值或标记强制消息。

【解决方案4】：

如果 SELECT 的第一项被禁用，则 selectedIndex 将等于第一个非禁用选项，而不是预期的 -1。

【讨论】：