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>

Answer 1

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>