How to trigger HTML5 validation and set custom message on change event?

Question

I have input text field that should allow only numeric values 0-9 and should be exactly eight digits long. This should be controlled by the onChange event. Once user is done typing validation should be triggered. If value is correct Ajax request will reach out to the server, if not user should see the message like other messages in HTML 5 validation. Here is example of my code:

$('#userid').on('change', checkUser);

function checkUser(e) {
  var fldObj = $(this);

  if (!e.target.checkValidity()) {
    fldObj[0].setCustomValidity('Invalid User ID.');
    console.log(fldObj.val());
  } else {
    //send ajax request
    console.log('User ID is valid!');
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<input type="text" name="userid" id="userid" value="" pattern="[0-9]{8}" placeholder="Enter User ID">

My code is not working correct. I do not see the message if I enter invalid value. If anyone knows the reason why the message is not displaying please let me know.

Possible duplicate of [html5 input pattern attribute not working outside a form?](https://stackoverflow.com/questions/19957446/html5-input-pattern-attribute-not-working-outside-a-form) — crenshaw-dev, Jul 18 '19 at 21:11

score 1 · Answer 1 · answered Jul 18 '19 at 21:00

Validity is only reported when the input is part of a form. Try entering an invalid value and submitting the form in the snippet below.

$('#userid').on('change', checkUser);

function checkUser(e) {
  var fldObj = $(this);

  if (!e.target.checkValidity()) {
    fldObj[0].setCustomValidity('Invalid User ID.');
    fldObj[0].parentElement.reportValidity();
    console.log(fldObj.val());
  } else {
    //send ajax request
    console.log('User ID is valid!');
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
    <input type="text" name="userid" id="userid" value="" pattern="[0-9]{8}" placeholder="Enter User ID">
    <button type="submit">Submit</button>
</form>

If you don't want to wait for the submit button to be clicked, check out HTMLFormElement.reportValidity().

I think OP was asking how to have the error appear onchange. — epascarello, Jul 18 '19 at 21:54
It seems that if the field is invalid once, it never goes back valid...Does it happen also to you? It seems it depends from setCustomValidity() method. How to fix that? — Sgaddo, Aug 11 '22 at 08:13

How to trigger HTML5 validation and set custom message on change event?

1 Answers1