JQuery newbie question re using validation plugin with Django newform. I have a simple email feedback contact django form that I wanted to enhance with some JQuery validation. I created a standalone (Non Django) version of the form and it works correctly.
However when I create a Django version of the form the validation rules seems to be ignored and the form is always posted - I would expect the form to fail, and never post. One difference (not sure if it's siignificant) is that the Django forms are created from classes/ templates and render as tables. However the exact same HTML code works for the basic form. I'm now thinking that there must be something different re how the submit is being processed for the Django form - but I'm stumped. Anyone got any ideas/things to try? TIA, Brendan Below is a simplified code (both Basic and Djange versions) sample stripped to one validation field: >>>>>>>>>>>>>>>>>>>>> Basic version of the form (working): >>>>>>>>>>>>>>>>>>>>> <!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" /> <script type="text/javascript" language="javascript" src="/media/js/ jquery-1.3.2.js""></script> <script type="text/javascript" language="javascript" src="/media/js/ jquery.validate.js"></script> <meta http-equiv="Content-Language" content="en-us" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Django JQuery Example</title> <link href="/media/css/default.css" media="screen" type="text/css" rel="stylesheet"> <style type="text/css"> pre { text-align: left; } label.error { float: top; color: red; padding-left: .5em; vertical- align: top; } </style> <script id="demo" type="text/javascript"> $(document).ready(function() { // validate signup form on keyup and submit var validator = $("#contact-us").validate({ rules: { sender: "required", minlength:4 }, messages: { sender: "Enter sender's name", } }); return false; }); </script> </head> <body> <div id="main"> <div style="clear: both;"></div> </div> <div class="content"> <body bgcolor="#D2FFD2"> <img src="/media/images/Masthead.png" width="942" height="162"> <form method="post" action="" id="contact-us"> {% block content %} <h3> {{ message }} </h3> <table> {{ eForm }} <tr> <td></td> <td> <div class="submit"> <input type="submit" value="Submit" value="update" /> </div></td> </tr> </table> {% endblock %} </form> </div> </body> >>>>>>>>>>>>>>>>>>>>> Django version of the form below (validation not working): >>>>>>>>>>>>>>>>>>>>> <!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" /> <script type="text/javascript" language="javascript" src="/media/js/ jquery-1.3.2.js""></script> <script type="text/javascript" language="javascript" src="/media/js/ jquery.validate.js"></script> <meta http-equiv="Content-Language" content="en-us" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Django JQuery Example</title> <link href="/media/css/default.css" media="screen" type="text/css" rel="stylesheet"> <style type="text/css"> pre { text-align: left; } label.error { float: top; color: red; padding-left: .5em; vertical- align: top; } </style> <script id="demo" type="text/javascript"> $(document).ready(function() { // validate signup form on keyup and submit var validator = $("#contact-us").validate({ rules: { sender: "required", minlength:4 }, messages: { sender: "Enter sender's name", } }); return false; }); </script> </head> <body> <div id="main"> <div style="clear: both;"></div> </div> <div class="content"> <body bgcolor="#D2FFD2"> <img src="/media/images/Masthead.png" width="942" height="162"> <form method="post" action="" id="contact-us"> <h3> Django/JQuery Demo - Get Request </h3> <table> <tr><th><label for="id_subject">Subject:</label></th><td><input id="id_subject" type="text" name="subject" maxlength="100" /></td></ tr> <tr><th><label for="id_email">Email:</label></th><td><input id="id_email" type="text" name="email" maxlength="100" /></td></tr> <tr><th><label for="id_msgtext">Text:</label></th><td><textarea id="id_msgtext" rows="10" cols="40" name="msgtext"></textarea></td></ tr> <tr> <td></td> <td> <div class="submit"> <input type="submit" value="Submit" value="update" /> </div></td> </tr> </table> </form> </div> </body> </html>
