How do I trigger HTML5 validation error popup when custom validation message is set manually?

Question

I have the following code:

document.getElementById('testSubmit').addEventListener('click', (e) => {
  e.preventDefault();
  document.getElementById('test').setCustomValidity('THIS WILL ALWAYS BE AN ERROR, how do I display this message?');
  console.log(document.getElementById('test').validationMessage);
});

<input id = "test" type = "email" required>
<input id = "testSubmit" type = "submit">

As you can see, I can indicate that an error happens in the input field. However, I would like to display the message in my input.validationMessage which is set by setCustomValidity method in my error popup (which does not appear). How do I make the UI validation error popup to appear. For reference, the popup I'm referring to can be seen in the following code:

document.getElementById('btn-submit').addEventListener("click", function() {
  if (!document.getElementById('form').checkValidity()) {
    document.getElementById("submit-hidden").click();
  }
});

<form id="form" action="">

  <input type="text" required />
  <input id="submit-hidden" type="submit" style="display: none" />

</form>

<button id="btn-submit">Submit</button>

Which displays the popup 'Please fill out this field' when you submit without filling the field. How do I trigger that popup, but with my custom validation message?

Selom · Accepted Answer · 2019-06-01 13:05:46Z

5

You can do so by using the .reportValidity(). Here is an example:

document.getElementById('testSubmit').addEventListener('click', (e) => {
  e.preventDefault();
  document.getElementById('test').setCustomValidity('THIS WILL ALWAYS BE AN ERROR, how do I display this message?');
  document.getElementById('test').reportValidity();
});

<input id = "test" type = "email" oninput="validateInput();" required>
<input id = "testSubmit" type = "submit">

answered Jun 1, 2019 at 13:05

Selom

4025 silver badges14 bronze badges

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

Comments

Nitin Sharma · Accepted Answer · 2019-06-01 13:06:37Z

You can you below code for Customize default validation message, But I have doning for required validation not for other, if you want to do for other validation as well please customize more

Form Code

<form action="" method="get">
    <input type="text" name="a" id="a">
    <input type="text" name="b" id="b" required>
    <button type="submit">Submit</button>
</form>

Js Code

document.addEventListener("DOMContentLoaded", function() {
    var elements = document.getElementsByTagName("input");
    for (var inp of elements) {
        inp.oninvalid = function(e) {
            e.target.setCustomValidity("");
            if (!e.target.validity.valid) {
                e.target.setCustomValidity("Change Validation Message");
            }
        };
        inp.oninput = function(e) {
            e.target.setCustomValidity("");
        };
    }
})

Collectives™ on Stack Overflow

How do I trigger HTML5 validation error popup when custom validation message is set manually?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related