HTML-Javascript表單驗證不起作用

Question

我正在嘗試驗證表單的所有字段均已用Javascript填充，但是它無法正常工作。 我是Web開發的新手，非常感謝您的幫助。 這是我的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> 

我剛剛將所需的屬性添加到選擇元素，這將它們標記為必需。

編輯

添加了代碼段而不是JS Bin-感謝evolutionxbox

Answer 2

這是一個HTML5原生示例，如何不使用Javascript進行簡單驗證。

沒有Javascript，這個簡單的示例就可以正常工作。 我做了什么？ 選擇元素具有必需的屬性。 因此，用戶必須選擇一個值。 如果在提交表單時這些選擇元素的值為空，則您將在空選擇元素旁邊收到一條錯誤消息，作為工具提示。

這是最簡單的方法。 除此之外，每個現代瀏覽器都會使驗證有所不同。 帶有錯誤消息的工具提示在不同的瀏覽器中顯示不同。 如果要保持一致的布局，則必須處理HTML5的Constraint Validation API 。

 <form> <p> <label for="select-1">Select 1</label> <select name="select-1" id="select-1" required> <option hidden>choose</option> <option value="1">Value 1</option> <option value="2">Value 2</option> </select> </p> <p> <label for="select-2">Select 2</label> <select name="select-2" id="select-2" required> <option hidden>choose</option> <option value="1">Value 1</option> <option value="2">Value 2</option> </select> </p> <button type="submit">submit</button> </form> 

Answer 3

您的代碼對我有用。 我在<head>中有<script>。

當然，我必須添加這個...

<input type="submit" />
</form>

除此之外，當所有字段都填寫在Chrome，IE和Firefox中時，我得到了表單驗證和有效提交。