<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>jQuery validation plug-in - comment form example</title> <link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" /> <script src="../lib/jquery.js" type="text/javascript"></script> <script src="../jquery.validate.js" type="text/javascript"></script> <script src="../lib/jquery.metadata.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $("#commentForm").validate({meta: "validate"}); $("#commentForm2").validate(); $("#commentForm3").validate({ messages: { email: { required: 'Enter this!' } } }); }); </script> <style type="text/css"> form { width: 500px; } form label { width: 250px; } form label.error, form input.submit { margin-left: 253px; } </style> </head> <body> <h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">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 messages with custom "meta" setting --> <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" class="{validate:{required:true, email:true, messages:{required:'Please enter your email address', email:'Please enter a valid email address'}}}"/> </p> <p> <input class="submit" type="submit" value="Submit"/> </p> </fieldset> </form> <!-- Custom messages with default "meta" setting --> <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" class="{required:true, email:true, messages:{required:'Please enter your email address', 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 overriden by a validate option --> <form class="cmxform" id="commentForm3" method="post" action=""> <fieldset> <legend>Please enter your email address</legend> <p> <label for="cemail">E-Mail *</label> <input id="cemail" name="email" class="{required:true, email:true, messages:{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> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script> <script type="text/javascript">_uacct = "UA-2623402-1";urchinTracker();</script> </body> </html>