Aug
13

Jquery form validation 1.3.9 with AJAX validation

By Cedric Dugas  //  Random news, featured  //  11 Comments

I am proud to announce that the Ajax validation for my form engine is ready to go. By the way I am also proud to say this plugin had a small line in a recent smashing magazine article!

This is a major shift in the plugin structure, everything is open, this enable a lot of possibility but please understand that there could be some minor bugs. I am still tracking frameworks bugs, this is why this is not called 1.4. The CSS styles are also revamped with a more 2.0 feel. You can grab the new version here.

AJAX validation

This functionality is quite simple to integrate, in your class attribute add: ajax[ajaxUser]
It should be the last item to validate in your validate[], while this is not necessary, I found it worked best there.
Ajax validation works only inline, when your field is validated for normal rules, it will create a post to a php file. There is no way for the user to bypass this, if the field do not validate on form submit, the user will need to change the information and the AJAX validation will occur.

In your json you follow pretty much the same syntax that you would use with a custom regex:

"ajaxUser":{
"file":"validateUser.php",
"alertText":"* This user is already taken",
"alertTextOk":"* This user is available",
"alertTextLoad":"* Loading please wait"},

The “file”: is obviously where you want your field value to be posted. In the validateUser.php you will have to keep the defined variable at the top, do your validation and at the end of the file you will see that I echo a json variable back. Please keep the same syntax. For now this file fake a php validation.

The alertTextOk and alertTextLoad are optional, this is, for example, to tell your user the nickname he has chosen is available, the box will also become green.

I want to validate directly from javascript

You can call a validation like this: $.validationEngine.loadValidation(“#date”)

Open and close prompts when you like on what you like

Another asked feature, that was not originally planned, was using my prompt on everything you want like a div element.This is now possible, you can call a prompt like this : $.validationEngine.buildPrompt(#ID,promptMessage,type)
ex: $.validationEngine.buildPrompt(“#date”,”This field is required”,”error”)

Close prompt for field ID: $.validationEngine.closePrompt(“#date”)
Close prompt anything else: $.validationEngine.closePrompt(“.allmydiv”,true) true means look outside the form

There are 3 type : error (red), pass (green), loading (black)

Stop inline validation for 1 field

Sometimes you have a field with a calender, but you want to keep the inline validation for all the other fields, or even this field if the user manually change the input. Well you can now intercept the inline validation by setting this variable on onlick or onchange state : $.validationEngine.intercept = true;

I hope you will like this version, this plugin is becoming more and more popular, I appreciate all the comments I have receive so far, it really helped the plugin to grow. I am really working hard and in time I hope this plugin will become the most powerful and easiest jQuery form validation.

Coming in 1.4
Minor bug fixes
More frameworks compatibility

Into the future:
Prompt box positionable

Author: Cedric Dugas

Cedric Dugas is an experienced front-end developer and founder of Position: Absolute, based in Montreal, Canada. When he is not doing CSS and jquery (does it ever happen?), he likes to read on web usability and play trumpet. Why don't you follow him on twitter.

11 Comments to “Jquery form validation 1.3.9 with AJAX validation”

  • Tokasa August 14, 2009 at 9:38 am

    Hi Cedric!!
    First thanks for this great validation tool!!! … I like it very much…carry on :)

    I think I found a bug… on submit I got error … firebug tells me message ’submitForm() is no defined’ …. and eclipse editor tells me the same when i open code.

    but finaly it is submitted. just to let you know.

    Thanks
    Tomas

  • Cedric Dugas August 14, 2009 at 9:43 am

    True, should have look at my error console when it submit, I will correct this today

  • Tokasa August 14, 2009 at 9:59 am

    Cedrik, I’ve got question… along normal html fields I’am implementing this nice ipod-styled menu… http://www.filamentgroup.com/examples/menus/ipod.php

    Any idea how can I validate if user has selected value in the menu or not and accordingly DISPLAY tooltip above that? The problem I see that it is classic html anchor element styled with css.

    Thanks for any idea.

  • Cedric Dugas August 14, 2009 at 10:14 am

    Well this is not going to be “easy”, the best way to this is adding a function for validating your error, in the span class you add, validate[spannotnul] , also add this in the json

    you look if your span has something in it in your new validate function you created,$(“#spanId”).html() == “”

    Then you open the prompt with the same syntax than my outside form open prompt in my example page. and put $.validationEngine.isError= true and if it validate close prompt and error – false;

  • Diarmuid King August 14, 2009 at 3:36 pm

    Hi Cedric,

    This script just keeps getting better – thanks again for your work on this.

    I also experienced the error Tokasa referred to – I found that making the following change on line 90 of jquery.validationEngine.js got rid of the error message:

    changed from:
    submitForm()
    to
    $.validationEngine.submitForm()

  • Cedric Dugas August 14, 2009 at 3:39 pm

    Yea, this is a regression from the structural changes, I will upload a corrected version tonight

  • Restez connectés ! » Validation de formulaire avec jQuery August 15, 2009 at 12:38 am

    [...] à Cédric Dugas pour sa classe de validation jQuery. A découvrir sur http://www.position-absolute.com Une démo française dispo sur cette page http://www.webcssdesign.com/ Version Française à [...]

  • Anonymous August 17, 2009 at 2:51 am

    [ipod menu validation]

    Hi Cedric,
    I got few questions to your reply…

    1) the new function will be “injected” in your code or it will be in my code? I would rather not go into your code for better upgrades etc…

    2) if I add “validate[spannotnul]” in a class name, what should I add in your code in “allRules” variable. some regex??

    I understand how to build and close prompt manualy, but simply I dont get yet how can I trigger my function.. on-submit event…

    Thank you
    Tomas

  • Richard Paul August 24, 2009 at 9:02 am

    I have a page which has multiple forms on it, one of these forms needs to be submitted via XHR post. The current implementation of validationEngine only seems to support a single callback for after successful validation using the settings.success attribute.

    Is there anyway to register multiple submit handlers?

  • Richard Paul August 24, 2009 at 9:21 am

    Ah I see, a javascript error is occuring in submitForm as the ’settings’ object is out of scope. Commenting out the submit handler allows the next registered event handler to optionally return true or false when called. This lets you submit via XHR and return false in your submit handler.

  • Cedric Dugas August 24, 2009 at 9:33 am

    I need to put the new version online, I just had literally no time

Leave a comment

Articles

RSSSome Tweets