javascript - 如何验证外部 javascript 文件中的选择下拉值不为空？

Question

我已经看过但没有找到我正在寻找的答案，而且我对 Javascript 也很陌生。我将如何验证用户是否从我的下拉列表中选择了一个州？如果他们不选择一个或选择第一个禁用的选项，则应出现警报。我的 HTML 和 Javascript 在不同的文件中。

这是我到目前为止用 javascript 尝试过的，下拉列表的验证在最后:

function validateForm() {
    // name validation
    var myName = document.forms["themissing"]["name1"].value;
    if (myName == "") {
        alert("Name must be filled out!");
        return false;
    }

    // age validation
    var myAge = document.forms["themissing"]["age1"].value;
    if (myAge == "") {
        alert("Age must be filled out!");
        return false;
    }

    // gender validation
    if (document.themissing.gender[0].checked == true) {
        return true;
    }
    else if (document.themissing.gender[1].checked == true) {
        return true;
    }
    else {
        alert("Gender must be selected!");
        return false;
    }

    // dropdown validation
    var mySelect = document.getElementById("states");
    if(!mySelect.value) {
        alert('You must select a State!');
        return false;
    }
    console.log("there is a value");
    return true;

}

这是我的 HTML:

<select class="form-control" id="states">
              <option value="selectstate" selected disabled>--Select a State--</option>
              <option value="AL">Alabama</option>
                <option value="AK">Alaska</option>
                <option value="AZ">Arizona</option>
                <option value="AR">Arkansas</option>
                <option value="CA">California</option>
                <option value="CO">Colorado</option>
</select>

HTML 很长，所以我只是从 Body 中提取出来。

如能提供正确方向的任何帮助，我们将不胜感激。

Answer 1

好消息是您真的很接近找到一个可行的解决方案!

您在上面发布的 javascript 只有两个问题:

首先，您的 mySelect 元素的默认值实际上是 "selectstate"，因此您应该真正检查一下是否 mySelect.value === "selectstate。

另一个问题是，在本节中，您有一个条件会使您的验证短路:

    // gender validation
    if (document.themissing.gender[0].checked == true) {
        return true;
    }
    else if (document.themissing.gender[1].checked == true) {
        return true;
    }
    else {
        alert("Gender must be selected!");
        return false;
    }

因此，如果选择了其中一个性别复选框，那么即使没有选择任何州，整个表格也被视为有效!

我会这样修改代码:

function validateForm() {
    // name validation
    var myName = document.forms["themissing"]["name1"].value;
    if (myName == "") {
        alert("Name must be filled out!");
        return false;
    }

    // age validation
    var myAge = document.forms["themissing"]["age1"].value;
    if (myAge == "") {
        alert("Age must be filled out!");
        return false;
    }

    // gender validation
    if (document.themissing.gender[0].checked == false && document.themissing.gender[1].checked == false) { // <-- second change here (first two ifs replaced by one check that can only fail)
        alert("Gender must be selected!");
        return false;
    }

    // dropdown validation
    var mySelect = document.getElementById("states");
    if(mySelect.value === "selectstate) { // <-- first change here
        alert('You must select a State!');
        return false;
    }
    console.log("there is a value");
    return true;

}