Jorn - thanks for the responses - I resolved my problem - for the record I had a mismatch between the versions of JQuery (1.3.2) and an earlier (incompatible) version of the plugin. This was causing some errors that I managed to track down with Firebug.
Downloaded the new version of the validation plugin and the behaviour is now what I expect. So it looks like this is nothing to do with Django. Hope this helps someone else in the future. Brendan On May 6, 2:47 pm, Jörn Zaefferer <joern.zaeffe...@googlemail.com> wrote: > You can set debug:true for debugging. It will always prevent the form > submit, which is useful to look at errors that are thrown during > validation. > > Jörn > > On Wed, May 6, 2009 at 8:37 PM, BrendanC <bren...@gmail.com> wrote: > > > 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> > >> > > > ... > > read more »
