Set custom HTML5 required field validation message


Required field custom validation

I have one form with many input fields. I have put html5 validations

<input type="text" name="topicName" id="topicName" required />

when I submit the form without filling this textbox it shows default message like

"Please fill out this field"

Can anyone please help me to edit this message?

I have a javascript code to edit it, but it's not working

$(document).ready(function() {
    var elements = document.getElementsByName("topicName");
    for (var i = 0; i < elements.length; i++) {
        elements[i].oninvalid = function(e) {
            if (! {
      "Please enter Room Topic Title");
        elements[i].oninput = function(e) {

Email custom validations

I have following HTML form

<form id="myform">
    <input id="email" name="email" type="email" />
    <input type="submit" />

Validation messages I want like.

Required field: Please Enter Email Address
Wrong Email: '[email protected]' is not a Valid Email Address. (here, entered email address displayed in textbox)

I have tried this.

function check(input) {  
        input.setCustomValidity("'" + input.value + "' is not a Valid Email Address.");  
    else {  

This function is not working properly, Do you have any other way to do this? It would be appreciated.

This question is tagged with javascript jquery html

~ Asked on 2012-12-10 09:38:39

The Best Answer is


Code snippet

Since this answer got very much attention, here is a nice configurable snippet I came up with:

  * @author ComFreek <>
  * @link
  * @license MIT 2013-2015 ComFreek
  * @license[dual licensed] CC BY-SA 3.0 2013-2015 ComFreek
  * You MUST retain this license header!
(function (exports) {
    function valOrFunction(val, ctx, args) {
        if (typeof val == "function") {
            return val.apply(ctx, args);
        } else {
            return val;

    function InvalidInputHelper(input, options) {
        input.setCustomValidity(valOrFunction(options.defaultText, window, [input]));

        function changeOrInput() {
            if (input.value == "") {
                input.setCustomValidity(valOrFunction(options.emptyText, window, [input]));
            } else {

        function invalid() {
            if (input.value == "") {
                input.setCustomValidity(valOrFunction(options.emptyText, window, [input]));
            } else {
               input.setCustomValidity(valOrFunction(options.invalidText, window, [input]));

        input.addEventListener("change", changeOrInput);
        input.addEventListener("input", changeOrInput);
        input.addEventListener("invalid", invalid);
    exports.InvalidInputHelper = InvalidInputHelper;



<input id="email" type="email" required="required" />
InvalidInputHelper(document.getElementById("email"), {
  defaultText: "Please enter an email address!",

  emptyText: "Please enter an email address!",

  invalidText: function (input) {
    return 'The email address "' + input.value + '" is invalid!';

More details

  • defaultText is displayed initially
  • emptyText is displayed when the input is empty (was cleared)
  • invalidText is displayed when the input is marked as invalid by the browser (for example when it's not a valid email address)

You can either assign a string or a function to each of the three properties.
If you assign a function, it can accept a reference to the input element (DOM node) and it must return a string which is then displayed as the error message.


Tested in:

  • Chrome Canary 47.0.2
  • IE 11
  • Microsoft Edge (using the up-to-date version as of 28/08/2015)
  • Firefox 40.0.3
  • Opera 31.0

Old answer

You can see the old revision here:

~ Answered on 2013-04-17 20:37:14


You can simply achieve this using oninvalid attribute, checkout this demo code

<input type="email" pattern="[^@]*@[^@]" required oninvalid="this.setCustomValidity('Put  here custom message')"/>
<input type="submit"/>

enter image description here

Codepen Demo:

~ Answered on 2015-07-03 11:23:53

Most Viewed Questions: