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? — crenshaw-dev
– crenshaw-dev, Commented Jul 18, 2019 at 21:11

crenshaw-dev · Accepted Answer · 2019-07-18 21:00:39Z

1

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().

answered Jul 18, 2019 at 21:00

crenshaw-dev

8,3526 gold badges49 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

epascarello Over a year ago

I think OP was asking how to have the error appear onchange.

crenshaw-dev Over a year ago

The part below the snippet should cover that.

Sgaddo Over a year ago

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?

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related