Html-Javascript Formular Validierung funktioniert nicht

Question

Ich versuche zu validieren, dass alle Felder meines Formulars mit Javascript ausgefüllt sind, aber es funktioniert einfach nicht. Ich bin neu in der Web-Entwicklung, jede Hilfe wird sehr geschätzt. Hier ist mein 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> 

Und hier ist mein 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

Arbeits Code ohne 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>

Ich habe soeben das gewünschte Attribut zu den ausgewählten Elementen, diese markiert sie als erforderlich.

bearbeiten

Added Schnipsel statt JS Bin - Dank evolutionxbox

Answer 2

Hier ist ein native HTML5 Beispiel, wie einfache Validierung zu erhalten, ohne Javascript zu verwenden.

Dieses einfache Beispiel funktioniert gut ohne Javascript. Was ich getan habe? Die Auswahlelemente haben das erforderliche Attribut. Also muss ein Benutzer einen Wert auswählen. Wenn der Wert dieser Auswahlelemente beim Senden des Formulars leer ist, erhalten Sie eine Fehlermeldung als Tooltip neben dem leeren Auswahlelement.

Dies ist der einfachste Weg. Darüber hinaus bearbeitet jeder moderne Browser die Validierung unterschiedlich. Die Tooltips mit den Fehlermeldungen werden von Browser zu Browser unterschiedlich angezeigt. Wenn Sie ein konsistentes Layout wünschen, müssen Sie sich mit dem Constraint Validation API of HTML5 befassen.

<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

für mich Ihr Code funktioniert. Ich hatte das < Skript> in der < Kopf>.

Natürlich musste ich diese hinzufügen ...

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

Other than that, habe ich Formularvalidierung und gültig einreichen, wenn alle Felder in Chrome, IE und Firefox gefüllt waren.