如何验证选择下拉值是否为空外部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中的事件 。 有了它，我们可以在<select>上添加所谓的事件监听器，它将等待事件input触发。 只有这样才能调用验证select和最终form函数validateForm() 。

你也使用if(!mySelect.value) {这意味着如果mySelect没有价值会发生什么，因为你的第一个选项有value="selectstate" 。 在这种情况下，属性disabled也没有做任何事情。

你可以用这种方式改变它：

var mySelect = document.getElementById("states");

function validateForm() {
  // dropdown validation
  if (mySelect.value === "notValid") {
    alert("You must select a State!");
    return false;
  }
  console.log("there is a value");
  return true;
}

mySelect.addEventListener("input", validateForm);

这是一个有效的例子。

Answer 2

好消息是你真的很接近有一个有效的解决方案！

您在上面发布的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;

}