、HTML Javascriptのフォームの検証は、私は私のフォームのすべてのフィールドではJavaScriptを記入されていることを検証しようとしていますが、それだけで動作していない

Question

を働いていません。私は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

の作業コード：

<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ビンの

編集

追加スニペット - evolutionxbox

Answer 2

はJavascriptを使用せずに簡単な検証を取得する方法をネイティブHTML5の一例です。

この単純な例では、Javascriptをせずに正常に動作します。私は何をしましたか？ select要素には必須の属性があります。したがって、ユーザーは値を選択する必要があります。フォームが提出されたときにこれらの選択の要素の値が空の場合、空のselect要素の隣にツールチップとしてエラーメッセージが表示されます。

これが最も簡単な方法です。それを越えて、現代のブラウザはすべて異なった検証を提供します。エラーメッセージが表示されたツールチップは、ブラウザーとは異なる表示になります。一貫したレイアウトが必要な場合は、Constraint Validation API of HTML5に対処する必要があります。

<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

あなたのコードは私のために動作します。私は> <頭の中で> <スクリプトを持っていました。もちろん

が、私はそれよりも

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

その他...これを追加する必要がありました、私は、フォームの検証を持って、すべてのフィールドはクローム、IEとFirefoxに充填したときに有効な送信してください。 javascriptをせずに