How to set custom HTML5 required field validation message with JavaScript?

Spread the love

Sometimes, we want to set custom HTML5 required field validation message with JavaScript

In this article, we’ll look at how to set custom HTML5 required field validation message with JavaScript.

How to set custom HTML5 required field validation message with JavaScript?

To set custom HTML5 required field validation message with JavaScript, we call the setCustomValidity method.

For instance, we write

<form id="myform">
  <input
    id="email"
    oninvalid="invalidMsg(this);"
    name="email"
    oninput="invalidMsg(this);"
    type="email"
    required="required"
  />
  <input type="submit" />
</form>

to add a form with an input.

We set oninput and oninvalid to invalidMsg(this) to call the invalidMsg function to set the validation message when we type in a value or when it’s invalid respectively.

Then we write

function invalidMsg(textbox) {
  if (textbox.value === "") {
    textbox.setCustomValidity("Required email address");
  } else if (textbox.validity.typeMismatch) {
    textbox.setCustomValidity("please enter a valid email address");
  } else {
    textbox.setCustomValidity("");
  }
  return true;
}

to define the invalidMsg function.

In it, we get the textbox input and check if value property for the input value.

If it’s empty, we set the validation message to "Required email address" with setCustomValidity.

If the input doesn’t match the type specified by the type attribute, typeMismatch is true, and we set a validation message for that with setCustomValidity.

Otherwise, we call setCustomValidity with an empty string to set it as valid.

Conclusion

To set custom HTML5 required field validation message with JavaScript, we call the setCustomValidity method.

Leave a Reply

Your email address will not be published. Required fields are marked *