JavaScript 表单验证 : if statement regarded select tag runs even when parameter is false

Question

我一直在编写一个脚本来检查我的表单字段是否为空。所有这些都工作良好，但是对于使用选择和选项标签的生日字段，当选择任何月份时，仍然返回文本“选择有效日期”。我试图仅在用户从下拉列表中选择“月份”时输出该文本，并且如果用户选择任何正常月份，则不会返回该文本。任何帮助将不胜感激!

function validateStudentSignUpForm() {
  var first = document.getElementById("first").value;
  var last = document.getElementById("last").value;
  var email1 = document.getElementById("email1").value;
  var password1 = document.getElementById("password1").value;
  var parentFirst = document.getElementById("parent-first").value;
  var parentLast = document.getElementById("parent-last").value;
  var childFirst = document.getElementById("child-first").value;
  var email2 = document.getElementById("email2").value;
  var password2 = document.getElementById("password2").value;
  var month1 = document.getElementById("option-month1").value;

  // First name can't be blank
  if (first == "") {
    document.getElementById("first").className = document.getElementById("first").className + " error";
    document.getElementById("firstid").innerHTML = "Can't be blank";
  }

  // Last name can't be blank
  if (last == "") {
    document.getElementById("last").className = document.getElementById("last").className + " error";
    document.getElementById("lastid").innerHTML = "Can't be blank";
  }

  // Email can't be blank
  if (email1 == "") {
    document.getElementById("email1").className = document.getElementById("email1").className + " error";
    document.getElementById("email1id").innerHTML = "Can't be blank";
  }

  // Password can't be blank
  if (password1 == "") {
    document.getElementById("password1").className = document.getElementById("password1").className + " error";
    document.getElementById("password1id").innerHTML = "Can't be blank";
  }

  // Parent first can't be blank
  if (parentFirst == "") {
    document.getElementById("parent-first").className = document.getElementById("parent-first").className + " error";
    document.getElementById("parent-firstid").innerHTML = "Can't be blank";
  }

  // Parent last can't be blank
  if (parentLast == "") {
    document.getElementById("parent-last").className = document.getElementById("parent-last").className + " error";
    document.getElementById("parent-lastid").innerHTML = "Can't be blank";
  }

  // Child first can't be blank
  if (childFirst == "") {
    document.getElementById("child-first").className = document.getElementById("child-first").className + " error";
    document.getElementById("child-firstid").innerHTML = "Can't be blank";
  }

  // Email can't be blank
  if (email2 == "") {
    document.getElementById("email2").className = document.getElementById("email2").className + " error";
    document.getElementById("email2id").innerHTML = "Can't be blank";
  }

  // Password can't be blank
  if (password2 == "") {
    document.getElementById("password2").className = document.getElementById("password2").className + " error";
    document.getElementById("password2id").innerHTML = "Can't be blank";
  }

  // Month can't be default
  if (month1 = "na") {
    document.getElementById("option-month1").className = document.getElementById("option-month1").className + " error";
    document.getElementById("date1id").innerHTML = "Choose a valid date";
  }
  return false;
}

Answer 1

有两个问题:

1. 您使用的是 option 元素的值，而不是 select 的值。 option 元素的值始终为“na”。仅当该选项被选中时，select 的值才会是 "na"。

2. 您在比较中使用的是 = 而不是 ==:if (month1 = "na") {。由于您只在一次比较中这样做，因此我认为这是一个拼写错误，而不是误解。

要修复此问题，请将 id 放在 select 上并读取其值，而不是选项' s value，并在比较中使用 ==。