javascript - Html-Javascript 表单验证不起作用

Question

我正在尝试验证表单的所有字段是否都用 JavaScript 填写，但它不起作用。我是网络开发新手，非常感谢任何帮助。这是我的 HTML:

<form name="form" action="actionFG.php" method="post" onsubmit="return val()";>
    <p>First Quarter Grade:</p>
    <select name = "q1"><option selected value="0" disabled="disabled"> input grade</option>
        <option value="1">A</option>
        <option value="2">B+</option>
        <option value="3">B</option>
        <option value="4">C+</option>
        <option value="5">C</option>
        <option value="6">D</option>
        <option value="7">F</option>
    </select>

    <p>Second Quarter Grade:</p>
    <select name = "q2">
        <option selected value="0" disabled="disabled"> input grade</option>
        <option value="1">A</option>
        <option value="2">B+</option>
        <option value="3">B</option>
        <option value="4">C+</option>
        <option value="5">C</option>
        <option value="6">D</option>
        <option value="7">F</option>
    </select>

    <p>Third Quarter Grade:</p>
    <select name = "q3">
        <option selected value="0" disabled="disabled"> input grade</option>
        <option value="1">A</option>
        <option value="2">B+</option>
        <option value="3">B</option>
        <option value="4">C+</option>
        <option value="5">C</option>
        <option value="6">D</option>
        <option value="7">F</option>
    </select>

    <p>Fourth Quarter Grade:</p>
    <select name = "q4">
        <option selected value="0" disabled="disabled"> input grade</option>
        <option value="1">A</option>
        <option value="2">B+</option>
        <option value="3">B</option>
        <option value="4">C+</option>
        <option value="5">C</option>
        <option value="6">D</option>
        <option value="7">F</option>
    </select>

    <p><input type="submit" value="Enter"></p>
</form>

这是我的 JavaScript:

function val(){
  if (form.q1.selectedIndex == 0) {
    alert('Please Enter Your Grade for Quarter 1');
    return false;
  } else if (form.q2.selectedIndex == 0) {
    alert('Please Enter Your Grade for Quarter 2');
    return false;
  } else if (form.q3.selectedIndex == 0) {
    alert('Please Enter Your Grade for Quarter 3');
    return false;
  } else if (form.q4.selectedIndex == 0) {
    alert('Please Enter Your Grade for Quarter 4');
    return false;
  }

  return true;
}

Answer 1

没有 javascript 的工作代码:

<form>
    <p>First Quarter Grade:</p>
    <select required>
        <option value=""> input grade</option>
        <option value="1">A</option>
        <option value="2">B+</option>
        <option value="3">B</option>
        <option value="4">C+</option>
        <option value="5">C</option>
        <option value="6">D</option>
        <option value="7">F</option>
    </select>

    <p>Second Quarter Grade:</p>
    <select required>
        <option value=""> input grade</option>
        <option value="1">A</option>
        <option value="2">B+</option>
        <option value="3">B</option>
        <option value="4">C+</option>
        <option value="5">C</option>
        <option value="6">D</option>
        <option value="7">F</option>
    </select>
    
    <p>Third Quarter Grade:</p>
    <select required>
        <option value=""> input grade</option>
        <option value="1">A</option>
        <option value="2">B+</option>
        <option value="3">B</option>
        <option value="4">C+</option>
        <option value="5">C</option>
        <option value="6">D</option>
        <option value="7">F</option>
    </select>
    
    <p>Fourth Quarter Grade:</p>
    <select required>
        <option value=""> input grade</option>
        <option value="1">A</option>
        <option value="2">B+</option>
        <option value="3">B</option>
        <option value="4">C+</option>
        <option value="5">C</option>
        <option value="6">D</option>
        <option value="7">F</option>
    </select>
    <button type="submit">submit</button>
</form>

我刚刚向 select 元素添加了 required 属性，这将它们标记为必需的。

编辑

添加了代码片段而不是 JS Bin - 感谢 evolutionxbox