Excellent jQuery Validation Plugin

Software

UPDATE: getting validate() to work with ajaxForm() was really easy. I’m loving life. All I had to do was add one level of redirection to the ajaxForm call:

$("form").submit(function() {
$(this).ajaxSubmit();
return false; // prevent default
});


I just added Jörn Zaefferer’s jQuery Validation Plugin to some code I’m writing. What a great piece of work. Jörn Zaefferer also developed the autocomplete plugin I really like for jQuery.

One gotcha: it’s easy with these Ajaxy development paradigms to forget the essentials. For this to work in a “batch” mode (i.e. all at once, instead of item by item), you need to make sure your form elements have the name= attribute. I’ve gotten lazy and used to using #ids pretty regularly.

One other thing I’m currently working on: getting it to coexist peacefully with the jQuery Forms plugin. I’m sure there’s some way I can interrupt the ajaxForm method from being called if I run into a validation error.

Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • Furl
  • Ma.gnolia
  • Reddit
  • TwitThis
4 Comments

4 Comments

  1. laureano arcanio  •  Jun 16, 2008 @7:47 pm

    Hi, i read your post and it just what i’m traying to acomplish. But i still cant make the Validation works with the AjaxForm plugin.
    Could you provide a full example ?
    Thanks in advice !

  2. Anthony Stevens  •  Jun 16, 2008 @8:06 pm

    @laureano: check out my current registration page at http://crowdify.com/register/ and check out the JS there. The validation stuff works well.f

  3. René  •  Jun 18, 2008 @2:22 am

    See what happens when you submit the register form twice. You’ll see that it does a ajax submit the second time, but without validating!

    I encourage you to keep looking for a solution, like I will be doing. I’ll report here when I found it.

  4. René  •  Jun 18, 2008 @2:43 am

    http://www.mail-archive.com/jquery-en@googlegroups.com/msg07820.html suggests to use submitHandler:. I tried that as well and failed, but the link explains how to do it right, by calling the form method. I followed the example and now validation and ajax submit both work. I use it in an intranet application, so I cannot give you working example, but I can give you the code snippet:

    $(document).ready(function(){
    $(”#collect”).validate({
    submitHandler: function(form) {
    $(form).ajaxSubmit({
    target: ‘.message’,
    success: function() {
    $(’.edit’).slideUp();
    $(’.view’).slideDown();
    $(’.message’).fadeIn(’slow’);
    }
    });
    },
    rules: {
    description: {
    required: true,
    minlength: ‘3′
    },
    ‘countries[]‘: ‘required’
    },
    messages: {
    description: {
    required: “Description is required”,
    minLength: “Should be at least 3 characters”
    },
    ‘countries[]‘: ‘A Region should have at least one country selected’
    }
    });
    });

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">