Prev Demo
HTML5
>
Showing Custom Validation Error
Next Demo
Write code here
J
|
B
|
A
<!DOCTYPE html> <html> <head> <title>Demo</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> </head> <body> <p>Custom validation error in HTML5 form</p> <form action="somepage.html" method="post"> <fieldset> <legend>Login</legend>Name: <input type="text" id="myName" name="myName" required placeholder="Please enter your name" data-error="Name is required" />* <br /> Email: <input name="myEmail" id="myEmail" type="email" required placeholder="Enter email" data-error="Email is required in you@domain.com" /> <br /> Url: <input type="url" id="myUrl" name="myUrl" /> <input type="submit" id="mySubmit" name="mySubmit" /> </fieldset> </form> <script> $(function () { var inputs = document.getElementsByTagName("INPUT"); for (var i = 0; i < inputs.length; i++) { inputs[i].oninvalid = function (e) { e.target.setCustomValidity(""); if (!e.target.validity.valid) { e.target.setCustomValidity(e.target.getAttribute("data-error")); } }; } }); </script> </body> </html>
Note: We DO NOT save your trial code in our database.
Output
