How to manually show an HTML validation message from a JavaScript function?

Question

I want to know if there is any way to programmatically show a HTML validation error, using a JavaScript function.

This is useful for scenarios where email duplication has to be checked. For example, a person enters an email, presses the Submit button, and then has to be notified that this email is already registered or something.

I know there are other ways of showing such an error, but I wanted to display it in the same way as how the validation error messages are shown (e.g. invalid email, empty field, etc.).

JSFiddle: http://jsfiddle.net/ahmadka/tjXG3/

HTML Form:

<form>
    <input type="email" id="email" placeholder="Enter your email here..." required>
    <button type="submit">Submit</button>
</form>
    
<button id="triggerMsg" onclick="triggerCustomMsg()">Trigger Custom Message</button>

JavaScript:

function triggerCustomMsg()
{
    document.getElementById("email").setCustomValidity("This email is already used");
    
}

The above code sets the custom message, but its not automatically shown. It's only shown when the person presses the submit button or something.

You will have to trigger submission of the form to get the message to appear — Explosion Pills
– Explosion Pills, Commented Jul 9, 2013 at 14:07

s16h · Accepted Answer · 2018-07-31 09:43:32Z

39

You can now use the HTMLFormElement.reportValidity() method, at the moment it's implemented in most browsers except Internet Explorer (see Browser compatibility at MDN). It reports validity errors without triggering the submit event and they are shown in the same way.

edited Jul 31, 2018 at 9:43

s16h

4,8951 gold badge24 silver badges33 bronze badges

answered Aug 28, 2016 at 18:39

Diego

4615 silver badges7 bronze badges

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

2 Comments

Pratik Kumar Over a year ago

reportValidity() method is good but it gives its own error message, how to use reportValidity with a custom error message?

Wasi Master Over a year ago

@PratikKumar I belive you can use HTMLSelectElement.setCustomValidity

Lalnuntluanga Chhakchhuak · Accepted Answer · 2020-04-28 09:37:22Z

29

var applicationForm = document.getElementById("applicationForm");    
if (applicationForm.checkValidity()) {
  applicationForm.submit();
} else {
  applicationForm.reportValidity();
}

reportValidity() method will trigger HTML5 validation message.

answered Apr 28, 2020 at 9:37

Lalnuntluanga Chhakchhuak

7287 silver badges12 bronze badges

Comments

Ryan Holdren · Accepted Answer · 2014-11-20 04:21:32Z

5

This question was asked over a year ago, but it's a good question that I recently encountered as well...

My solution was to use JavaScript to create an attribute (I went with "data-invalid") on the <label> of each <input>, <select> and <textarea> containing the validationMessage.

Then some CSS...

label:after {
    content: attr(data-invalid);
   ...
}

... displays the error message.

Limitations

This only works provided each element has a label. It will not work if you put the attribute on the element itself, because <input> elements cannot have :after pseudo elements.

Demo

http://jsfiddle.net/u4ca6kvm/2/

answered Nov 20, 2014 at 4:21

Ryan Holdren

3563 silver badges12 bronze badges

Comments

Tobias Buschor · Accepted Answer · 2017-04-08 20:15:13Z

3

As mentoned by @Diego you can use form.reportValidity();
To support IE and Safari include this polyfill, it just works:

if (!HTMLFormElement.prototype.reportValidity) {
    HTMLFormElement.prototype.reportValidity = function() {
      if (this.checkValidity()) return true;
      var btn = document.createElement('button');
      this.appendChild(btn);
      btn.click();
      this.removeChild(btn);
      return false;
    }
}

answered Apr 8, 2017 at 20:15

Tobias Buschor

3,3652 gold badges24 silver badges23 bronze badges

Collectives™ on Stack Overflow

How to manually show an HTML validation message from a JavaScript function?

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related