CODEWITHSUNDEEP
javascripthtml
rte
rte

Reputation: 49

Html-Javascript form Validation not working

I am trying to validate that all fields of my form are filled out with Javascript, but it is just not working. I am new to web development, any help is greatly appreciated. Here is my 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>

And here is my 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;
}

Upvotes: 0

Views: 99

Answers (3)

Frank Groot
Frank Groot

Reputation: 570

Working code without 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>

I have just added the required attribute to the select elements, this marks them as required.

Edit

Added snippet instead of JS Bin - Thanks to evolutionxbox

Upvotes: 4

Marcel
Marcel

Reputation: 5119

Here is a native HTML5 example how to get simple validation without using Javascript.

This simple example works fine without Javascript. What I 've done? The select elements got the required attribute. So a user has to select a value. If the value of these select elements is empty when the form is submitting, you will get an error message as a tooltip next to the empty select element.

This is the simplest way. Beyond that every modern browser handels the validation different. The tooltips with the error messages are displayed different from browser to browser. If you want a consistent layout, you have to deal with the 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>

Upvotes: 0

chromahoen
chromahoen

Reputation: 31

Your code works for me. I had the < script > in the < head >.

Of course, I had to add this...

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

Other than that, I got form validation and valid submit when all fields were filled in Chrome, IE and Firefox.

Upvotes: 0

Related Questions