jQuery Validate goodness for the rest of us

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...)

I use jQuery Validate plugin

I use jQuery Validate plugin on http://politwiki.org for comments. I add verification field, if filled - spam. And pack by Dean Edwards packer for more antibot security.

jquery_plugin_add('validate');

Hi, where should jquery_plugin_add('...') calls be added ?.

It doesn't work for me when added in template.php or page.tpl.php . Tried them inside a node directly.

This is what I have in the node directly;
----------------------------------------
jquery_plugin_add('validate');
drupal_add_js (
'$(document).ready(function(){
$("#f_jskr_register").validate({
rules: {
cname: {
required: true,
minLength: 2
},
email: {
required: true,
email: true
},
},
messages: {
name: { name:"Please specify your name" },
email: { email: "Your email address must be in the format of name@domain.com" }
}

});
}); ',
'inline');
------------------------------------
I find a Expected identifier error. The syntax looks ok,no?. Would really appreciate any clues.

You must enable the jquery_plugin module

This module simply provides a nice centralized place to hang all you jQuery plugins:

"The jquery_plugin module allows you to load miscellaneous jQuery plugins from any module or theme by calling the jquery_plugin_add($plugin) function." (http://drupal.org/project/jquery_plugin)

Drupal Validations module

Hi there!

I've just created a new Drupal module called Validations. It extends the Forms API to add validation procedures.

I'll integrate JavaScript validations as well, so with a simple Forms API declaration you'll have both server-side (PHP) + client-side (JavaScript) validations.

I was thinking about integrating jQuery Validation plugin for the JS side.

You can see my blog's page about it here:
http://ageekapart.wordpress.com/2009/03/08/drupal-module-validations/.

If you prefer to go to the Validations module directly, please go here: http://drupal.org/project/validations

Please send me some comments! Thanks!

Yes, I did see that

Thanks for reminding me, will definitely check it out!

Victor

Nice article

Helpful article, Victor. Thanks!
I'm kind of new to Drupal world and not really sure what the difference is between the "chapter 10" method of building a form, using the form api, and html method that you used above. I guess, if you don't really want to store data from the form in the database you would go for the html way. Please correct me if I'm wrong.

Always use the FormAPI

The "HTML method" is not exactly a method, it is simply a very easy way to test the setup on a plain Drupal page (without having to write a module, etc., just for testing).

Normally, you would use hook_form_alter in your module and stick in the classes that jQuery Validate then detects in real time.

Important correction complicates things for cck use

So I'll just comment to myself:

Hey, jackass! You have allowed superstition to overcome rational thought once again. You state "notice how the id and name attributes have to match", but... not true!

What has to match (and this is stated in the non-applicable but applicable anyway new Validation docs) is the preceding label "for" attribute and the input "name" attribute.

And... none of your yuppie hyphens, either (Nick Lewis is right!).

So...... I guess it's method 1 -- (class="other value {weird stuff:more weird stuff and no custom messages}" -- for us, until we shift over to Drupal 6 and the cadillac showstopper jQuery, with which we can probably conquer the hyphen prejudice. But hey, I'm pdf'ing all the current docs, now!

I was updating my

I was updating my application I’m working on to use the latest jQuery Validation plugin and was skimming through the documentation. One neat thing I noticed was this:

Using remote validation to help with captchas

Remote validation to check if the user entered the correct captcha, without forcing him to submit the form first

That is a great idea! I know with some of these captchas I have a difficult time deciphering the text often confusing “Os” and zeros, etc. It would be great to get feedback before submitting the form on your successful interpretation of the image

Cool idea

Now it's just a question of finding a couple of free hours to have a go at this.

If you get there first, let me know!

Thanks for the idea,

Victor