CODEWITHSUNDEEP
javascripthtml
KTibow
KTibow

Reputation: 818

HTML form doesn't validate

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>

Upvotes: 1

Views: 468

Answers (1)

Hien Nguyen
Hien Nguyen

Reputation: 18973

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>

Upvotes: 1

Related Questions