HTML form doesn't validate

Question

I'm making an HTML form that controls some JS. The person is supposed to fill out the form, and when they press submit, the form will validate and it runs some JS if it works. The problem is that when I press on submit, there's no validation. Can anybody help me fix this? If that's not possible, is there a way to validate my form (with the already existing limits) without any jQuery through JS? (I'm using Firefox, by the way.)

function parseForm() {
  alert("I got your data!");
}

<form>
  Letter of card:<br>
  <input type="text" id="letter" maxlength="1" pattern="[A-Da-d]{1}" required><br> Number of card:<br>
  <input type="number" id="number" maxlength="1" min="1" max="4" required><br> Unique PIN:<br>
  <input type="number" id="pin" maxlength="4" min="0" pattern="[0-9]{4}" required><br>
  <input type="submit" onclick="parseForm();" value="Submit">
</form>

Hien Nguyen · Accepted Answer · 2020-04-22 14:30:43Z

You need move your code to onsubmit instead onclick of button as

<form action="#" onsubmit="parseForm();">
  Letter of card:<br>
  <input type="text" id="letter" maxlength="1" pattern="[A-Da-d]{1}" required><br> Number of card:<br>
  <input type="number" id="number" maxlength="1" min="1" max="4" required><br> Unique PIN:<br>
  <input type="number" id="pin" maxlength="4" min="0" pattern="[0-9]{4}" required><br>
  <input type="submit"  value="Submit">
</form>

function parseForm() {
  alert("I got your data!");
}

<form action="#" onsubmit="parseForm();">
  Letter of card:<br>
  <input type="text" id="letter" maxlength="1" pattern="[A-Da-d]{1}" required><br> Number of card:<br>
  <input type="number" id="number" maxlength="1" min="1" max="4" required><br> Unique PIN:<br>
  <input type="number" id="pin" maxlength="4" min="0" pattern="[0-9]{4}" required><br>
  <input type="submit"  value="Submit">
</form>

Collectives™ on Stack Overflow

HTML form doesn't validate

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related