Html-Javascript form Validation not working

Question

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;
}

Please post whole HTML file, also you open a lot of p tags without closing them. — Frank Groot
– Frank Groot, Commented May 17, 2017 at 12:25
I suggest to read about the HTML5 Constraint Validation API. This can do all the work for you. It is native in HTML5. — Marcel
– Marcel, Commented May 17, 2017 at 12:26
The code works for me. Are you including a closing tag for your form, and a submit button? — fez
– fez, Commented May 17, 2017 at 12:27
you are missing the <button type="submit">submit</button></form> code.Your code working good — prasanth
– prasanth, Commented May 17, 2017 at 12:29

Community · Accepted Answer · 2017-05-23 12:26:26Z

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

Did you know you can have snippets within an answer? Removing (mostly) the need for jsbin links?

chromahoen · Accepted Answer · 2017-05-17 12:36:21Z

0

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.

answered May 17, 2017 at 12:36

chromahoen

314 bronze badges

Comments

Marcel · Accepted Answer · 2017-05-17 12:41:33Z

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>

Collectives™ on Stack Overflow

Html-Javascript form Validation not working

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related