1

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

See example

3
  • You could use a framework including tooltips, like Bootstrap... Commented Oct 10, 2018 at 8:18
  • 2
    Hey Napalm :) Have a read of How to Ask and edit your question appropriately, normally including a minimal reproducible example showing us what you have tried. Good luck :) Commented Oct 10, 2018 at 8:30
  • Possible duplicate of Can I change mindate message? Commented Oct 10, 2018 at 8:55

2 Answers 2

2

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(""); }) }) 
Sign up to request clarification or add additional context in comments.

Comments

1

You may try this as simple as it

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

You can also set Length

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.