How to make custom validation error message?

Question

How can I make this kind of error message? I am building a login validation form.

See example

You could use a framework including tooltips, like Bootstrap... — Marco Dal Zovo, Oct 10 '18 at 08:18
Hey Napalm :) Have a read of [ask] and edit your question appropriately, normally including a [mcve] showing us what you have tried. Good luck :) — garfbradaz, Oct 10 '18 at 08:30
Possible duplicate of [Can I change mindate message?](https://stackoverflow.com/questions/52605109/can-i-change-mindate-message) — Maor Refaeli, Oct 10 '18 at 08:55

score 2 · Accepted Answer · answered Oct 10 '18 at 08:49

In addition:

You can use customValidity api to create custom messages and will use the default tooltip provided by the browser.

DOCS: https://developer.mozilla.org/en-US/docs/Web/API/ValidityState

Check bellow a simple example:

https://jsbin.com/popazajawu/2/edit?html,js,console,output

JS:

var inputs = document.querySelectorAll('input');

inputs.forEach(input => {
  input.addEventListener('invalid', function(e) {
    e.target.setCustomValidity("[CUSTOM MESSAGE] This field cannot be left blank")
  })

  input.addEventListener('input', function(e) {
    e.target.setCustomValidity("");
  })
})

Rao · Answer 2 · 2018-10-10T08:52:41.950

1

You may try this as simple as it

<input type= "text" name= "name" pattern= "[0-9]" required="required">

You can also set Length

edited Oct 10 '18 at 08:52

answered Oct 10 '18 at 08:45

Rao

397
1
12

How to make custom validation error message?

2 Answers2