Jon - Good catch - however that was just a cut/paste problem - below is a new example that does not work as expected - for some reason the validation errors are ignored and the form is posted - not what I was expecting. Is there something else I need to do to prevent form from posting on errors? Why would the validation errors get ignored?
Any ideas? TIA <!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> <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: { subject: "required", email:{ required: true, email: true } }, messages: { subject: "Enter subject info", email: "Enter email info", } }); }); </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> On May 5, 10:35 am, Jörn Zaefferer <joern.zaeffe...@googlemail.com> wrote: > You define rules for a field "sender", but there is no input with > name="sender". > > Jörn > > On Tue, May 5, 2009 at 7:28 PM, BrendanC <bren...@gmail.com> wrote: > > > 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> > >
