<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery validation plug-in - comment form example</title> <link rel="stylesheet" media="screen" href="css/screen.css"> <script src="../lib/jquery.js"></script> <script src="../dist/jquery.validate.js"></script> <script> $(document).ready(function() { $("#commentForm").validate(); $("#commentForm2").validate({ messages: { email: { required: 'Enter this!' } } }); }); </script> <style> form { width: 500px; } form label { width: 250px; } form label.error, form input.submit { margin-left: 253px; } </style> </head> <body> <h1 id="banner"><a href="https://jqueryvalidation.org/">jQuery Validation Plugin</a> Demo</h1> <div id="main"> <p>Take a look at the source to see how messages can be customized with metadata.</p> <!-- Custom rules and messages via data- attributes --> <form class="cmxform" id="commentForm" method="post" action=""> <fieldset> <legend>Please enter your email address</legend> <p> <label for="cemail">E-Mail *</label> <input id="cemail" name="email" data-rule-required="true" data-rule-email="true" data-msg-required="Please enter your email address" data-msg-email="Please enter a valid email address"> </p> <p> <input class="submit" type="submit" value="Submit"> </p> </fieldset> </form> <!-- Custom message for "required" in metadata is overridden by a validate option --> <form class="cmxform" id="commentForm2" method="post" action=""> <fieldset> <legend>Please enter your email address</legend> <p> <label for="cemail">E-Mail *</label> <input id="cemail" name="email" data-rule-required="true" data-rule-email="true" data-msg-email="Please enter a valid email address"> </p> <p> <input class="submit" type="submit" value="Submit"> </p> </fieldset> </form> <a href="index.html">Back to main page</a> </div> </body> </html>