How can I make this kind of error message? I am building a login validation form.
You may try this as simple as it
<input type= "text" name= "name" pattern= "[0-9]" required="required">
You can also set Length
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("");
})
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.