awebfactory - web application factory pattern

OK, so I'm producing a couple of sites now that need browser side validation... And there is one of these great jQuery plugins called Validation. Now, Drupal uses jQuery, right? So, is there a contributed module out there that integrates this great little plugin? Woot! Yes there is a Santa Claus... enter jQuery plugins, looks like we're in!

Now, since I'm producing these sites now, I cannot be using Drupal 6, since Drupal is nothing without views and cck, in terms of building web applications. And that means that in terms of jQuery, one is caught behind the eight-ball of planned obsolescence that plagues Drupal 5.x ... what to do? Will this great plugin work with Drupal 5.x? Yes, there is a Drupal 5.x version ("recommended for 5.x" it says). So what this implies to me is that I can download versions of the plugin vetted against the ancient jQuery version that comes with Drupal 5.x, then niftily upgrade to Drupal 6.x later. Cool.

Of course, Drupal 5.x comes with jQuery one point oh one, so it is no surprise that jQuery plugin needs another module, jQuery Update, to be able to have a newer version of jQuery so as to be able to support the jQuery Validation plugin. So, apart from the built-in jQuery we need jQuery Update, then jQuery Validation, then just a few lines of code, and we're in!

So, 1) install jQuery Update; and then 2) install jQuery plugins.

Now Nick Lewis swears by jQuery Validation, and has a nifty little article about several plugins: "7 jQuery Plugins That Made Our Lives Easier at ON Networks", where he mentions a few caveats: something about having to use inline rules, and a couple of other things, but surely that can't amount to much. The maintainer of the jQuery plugins module, however, mfb (thanks!), is more specific; in one of the few issues on his queue, he states:

"By the way, the docs at http://docs.jquery.com/Plugins/Validation
are for the latest version of the plugin, which requires jQuery 1.2 and
is available only in the Drupal 6 branch of this module."

OK. Well, where are the old docs? Well, the awesome contributor of the Validate plugin happens to take a dim view of keeping old versions around. One poor sap left a comment on the maintainer's blog:

"This looks like a very nice plugin, but it took me a few hours to
figure out that it depends on jQuery 1.2, which means that Drupal users
such as myself can’t use it. (The current Drupal release (5) officially
supports only v1.0, but some people have hacked it up to v1.1.)"

answers Jörn:

"@mykle: Drupal 6 includes jQuery 1.2.x, so once that is available… The
validation 1.2 release doesn’t require the metadata plugin anymore for
inline-rules, but requires 1.2.2+ nonetheless. Keeping compability with
older version isn’t worth it from my perspective, sooner or later
everyone should be able to upgrade to current jQuery versions."

Well, I understand where the guy's coming from, but... 'Nuff said. Now, it's very ironic, but the saving factor here is that jQuery is using Drupal on their site, and since they don't believe in reinventing the wheel, they're using the good old project module for version control of project versions!!! All right! The trick is to download the full version (including demos and docs) of the version bundled with jQuery plugins, which is geared to the jQuery update version of jQuery. Kewl!!!

So back to the jQuery Validate plugin page on the jQuery site: http://plugins.jquery.com/project/validate

There's the good old "View all releases". Things may be f*k*d up, but they're our kind of f*k*d up things way!

"View all releases"... like an oasis, a blue neon sign of sanity in a world of hipsters. And, there it is, folks! Version 1.1.2 YES! jquery.validate_8.zip. So now we have a plethora of examples and other good stuff that might actually have a chance in hell of working in Drupal (the one we're using to make a living).

And now for something completely different

So let's do something already. I know! Since we have the necessary modules installed, let's do a test "page" content type in php and see if we can get this browser side snazzy javascript validation rocking!

The following test works, for the first field; notice the old-fashioned syntax in the class attribute, which has now been modernized in the latest (alas, inaccessible) version, thanks to using delegation.js:

<?php
    jquery_plugin_add('metadata');
    jquery_plugin_add('validate');
    drupal_add_js (
      '$(document).ready(function(){
         $("#commentForm").validate(
 
           );}); ',
      'inline');
 
?>
 
 <form class="cmxform" id="commentForm" method="get" action="">
 <fieldset>
   <legend>A simple comment form with submit validation and default messages</legend>
   <p>
     <label for="cname">Name</label>
     <em>*</em><input id="cname" name="name" size="25" class="hola {required:true,minLength:3}" minlength="2" />
   </p>
   <p>
     <label for="cemail">E-Mail</label>
     <em>*</em><input id="cemail" name="email" size="25"  class="required email" />
   </p>
   <p>
     <label for="curl">URL</label>
     <em>  </em><input id="curl" name="url" size="25"  class="url" value="" />
   </p>
   <p>
     <label for="ccomment">Your comment</label>
     <em>*</em><textarea id="ccomment" name="comment" cols="22"></textarea>
   </p>
   <p>
     <input class="submit" type="submit" value="Submit"/>
   </p>
 </fieldset>
 </form>

And so does the following one, for the first 2 fields (notice how the id and name attributes have to match)(Edit: Notice how the preceding label "for" attribute and the input "name" attribute have to match).

:

<?php
    jquery_plugin_add('metadata');
    jquery_plugin_add('validate');
    drupal_add_js (
      '$(document).ready(function(){
         $("#commentForm").validate({
		rules: {
			cname: {
				required: true,
				minLength: 2
			},
			cemail: {
				required: true,
				email: true
			},
               }
});
}); ',
      'inline');
 
?>
 
 <form class="cmxform" id="commentForm" method="get" action="">
 <fieldset>
   <legend>A simple comment form with submit validation and default messages</legend>
   <p>
     <label for="cname">Name</label>
     <em>*</em><input id="cname" name="cname" size="25" class="hola" minlength="2" />
   </p>
   <p>
     <label for="cemail">E-Mail</label>
     <em>*</em><input id="cemail" name="cemail" size="25"  class="equus" />
   </p>
   <p>
     <label for="curl">URL</label>
     <em>  </em><input id="curl" name="curl" size="25"  class="equus" value="" />
   </p>
   <p>
     <label for="ccomment">Your comment</label>
     <em>*</em><textarea id="ccomment" name="ccomment" cols="22"></textarea>
   </p>
   <p>
     <input class="submit" type="submit" value="Submit"/>
   </p>
 </fieldset>
 </form>

The sky's the limit, gals and guys! Go to it! (now, where was that form_alter stuff? Ah, yes, Chapter 10, The Form API. Time to start swotting for my Drupal certification...)