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.

Dionysius

You will have to trigger submission of the form to get the message to appear – Kola

http://jsfiddle.net/tjXG3/2/ using jquery – Leaven

Answer 1

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.

Dottiedottle

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

@PratikKumar I belive you can use HTMLSelectElement.setCustomValidity – Haire

Answer 2

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

reportValidity() method will trigger HTML5 validation message.

Macbeth

Answer 3

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/

Rattler

Answer 4

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;
    }
}

Autophyte