0

I am keeping trying to validate my form. I've used several approaches so far but none of them were working. My recent trial looks like this (validation of the UK address):

<input 
  class="validation" 
  name="postcode" 
  type="text" 
  pattern="[A-Za-z]{1,2}[0-9Rr][0-9A-Za-z]? [0-9][ABD-HJLNP-UW-Zabd-hjlnp-uw-z]{2}" 
  oninvalid="InvalidMsg(this);" 
  placeholder="Enter postcode" 
  required
/>

<script>
  function InvalidMsg(textbox) {

    if (textbox.validity.patternMismatch) {
      textbox.setCustomValidity('please enter 10 numeric value.');
    } else {
      textbox.setCustomValidity('');
    }
    return true;
  }
</script>

which is based on the example below:

http://jsfiddle.net/patelriki13/Sqq8e/5

I also tried something versatile

https://www.tjvantoll.com/2012/08/05/html5-form-validation-showing-all-error-messages/

but it didn't work either.

enter image description here

I think, my situation is very similar to this one:

Error message not displaying html forms using php

I can't use the pattern attribute only, because it prevents my form from submission

What am I doing wrong here?

I have 2 pages in one HTML file, distincted as per the hint here:

Multiple distinct pages in one HTML file

and the submit button is located on the second page.

As far as I understand it correctly it should return me to the bracket, where the input was wrong and show an error. It doesn't happen.

Geographos
  • 827
  • 2
  • 23
  • 57
  • Is the text box in a form? Validation is done when you try to submit the form. – Barmar Jun 15 '21 at 15:27
  • Yes it is, but i have validation button on another side, as I divided this form by 2 pieces. They are on the same HTML site, but you need to press next in order to reach 2nd piece and submit button. – Geographos Jun 15 '21 at 15:29
  • If you're not submitting the form, you need to call `checkValidity()` or `reportValidity()` to make JavaScript check the constraint. – Barmar Jun 15 '21 at 15:34

0 Answers0