Introducing hooks in the jQuery form validation engine plugin

by Cedric Dugas on March 23, 2011

Hooks are a new feature just introduced into the engine recently. This makes it very easy to add extra behaviors on top of the current error prompts.

The hooks make the use of the jQuery custom event feature. A good example of use would be to add a mention that there is a problem at the form beginning when an error is found.

See the Demo
Download Plugin

There are currently 3 hooks implemented in the engine. One that is triggered before the validation, one after each field validation, and one, finally, with the form result.

* jqv.form.validating : Triggers when the form is submitted and before it starts the validation process
* jqv.field.result(event, field, errorFound, prompText) : Triggers when a field is validated with the result.
* jqv.form.result(event, errorFound) : Trigger when a form is validated with the result

You must always bind a hook on the form you want to use. An example would be:

    $("#formID").bind("jqv.form.result", function(event, errorFound) {
	  if(errorFound) alert("There is a problem with your form");
    })

Hope you guys like it!



41 comments

Just having my first look at JQuery Inline Validation. It looks really good. I can’t find any documentation. Do you have any? I have written lots of code and will contribute whatever new ideas and additions I make to this project.

by Kim Geiger on March 24, 2011 at 11:26 pm. #

Hello !

I have a question.
I have seen the examples. In ‘demoMultipleForms’ i have seen
messages over and under the input fields.
How can I control this feature ?

Your sincerly

Stephan

by Stephan on April 4, 2011 at 11:06 am. #

I just came across your validation engine and I must congratulate you.

Have you thought of form element dependencies ? If you click an option to show another form element (hidden until then) and that field becomes required.

Thank you

Bogdan

by Bogdan on April 5, 2011 at 2:18 am. #

dependencies are not in, however, the engine do not validate hidden element, so in your case it would work (but in others it would not)

by Cedric Dugas on April 5, 2011 at 6:27 am. #

i have a question, that i need to give inline hints to the validation, but its not working with your code, if i am hinting it, its not validating but instead sending the hint on submitting the form.

pls tell me solution for it

thanks

by Yaseen on April 11, 2011 at 5:00 am. #

@yaseen sorry buyt its really hard to tell the problem without seeing the actual code

by Cedric Dugas on April 11, 2011 at 7:19 am. #

k i will email u code thanxx for help in advance :)

by yaseen on April 11, 2011 at 12:00 pm. #

Re: yaseen’s question: If you put a value in a text input field to guide the user:

The validation-engine will not flag it as “empty” when tabbing over it or submitting the form. May be a custom rexex could invalidate it? For example by disallowing “–” in the name field.

Just a thought.

TheDude

by TheDude on April 15, 2011 at 1:17 am. #

hi..
i use Jquery Validation engine in my code its working fine for all Submit button..
is it possible to call validations only for some specific buttons
i have 4 buttons and need to call validattion on only 2 of them…
how could i solve such issue..
please help me….

Ruchira

by ruchira on April 19, 2011 at 8:55 am. #

Hi,
I am wondering how you make the form firing alerts only on hitting submit.

I do not want to annoy the user before he actually tries to send hings.

Thanks in advance
Carl

by Carl on April 20, 2011 at 2:12 pm. #

I just using this plugin and is awsome my congratulations, just a problem I couldn’t resolve. What about reset a form?, I need reset a form if i use a comon reset the errror prompts appears and i don’t know what can i do with that problem, or redirect a page with an incomplete form without error prompts appears.

thanks before hand!

by carlosalvet on April 25, 2011 at 4:51 pm. #

Great job !

So sad, just spent hours to finally discover that jqtransform is not compatible with your plugin…

by isabelle on April 26, 2011 at 10:29 am. #

Hi Cedric!

I have extended this form validation plugin for one of my projects.
I have added a descriptive blog post about what changes I have made:
http://amolnw.wordpress.com/2011/05/08/jquery-validationengine-extended-jquery-form-validations/

Please let me know your comments.

by Amol Nirmala Waman on May 8, 2011 at 7:16 am. #

I’m currently using your validation for my froms, however, part of my forms is come with input user name and check user name to see if is avaliable from databse, however, do you have validation for check user name with database scripts! i tried to find that information and i could not find it.

Please let me know thanks.

AM

by Alidad on May 10, 2011 at 3:40 pm. #

Hi
It’s great plugin but can not work on IE9 .
Have any idea ?

by KK on May 11, 2011 at 7:41 pm. #

and also not work on firefox 3.6 :-/

by Syed Kamran on July 28, 2011 at 3:20 am. #

It works in IE9, FF3.6 also! check the demo – http://www.navayan.com/register.php

by Amol Nirmala Waman on September 2, 2011 at 1:51 am. #

pls how can i use this plugin to validate a form in a Modal box example BOXY… its giving sleepless nights…

by Emeka Mbah on May 14, 2011 at 7:46 am. #

I would like to know how to have multiple buttons of type ’submit’ but if you click to skip the validation, working with asp.net and I have many buttons on a form, as ‘back’, ‘add’ (event ajax), and I wish there is something simple to make adding this exception, a brief example of code:

I saw something like on other validations

class = ’submit’
and
class = ‘cancel submit’

There is something to do at this point?
the application is fantastic, but I need it to be perfect.

I’m from BRAZIL, don’t speak English, but thanks for listening.

by Franklin Hermes on May 25, 2011 at 2:31 pm. #

A brief example of code:

by Franklin Hermes on May 25, 2011 at 2:32 pm. #

i want to submit a form which contain array fields
eg.

and etc….

your validation engine will still validate, but error message was not in the right position.

by tan on May 31, 2011 at 11:48 am. #

hi guys did anyone manage to get the error msg shown at the correct position for array objects?

by henchmanification on August 22, 2011 at 1:08 pm. #

sorry, the html code are not able to displayed here,
I have a multiple input with same Name (name=”user[]“) but different id (id=”user1″, id=”user2″)
when i wish to validate them, your validation engine will still validate, but error message was not in the right position.

by tan on May 31, 2011 at 11:50 am. #

Thank you for this great plugin.
I just uploaded my first website.I noticed that my contactform is not working perfect.
There is a malfunction with the captcha validation field. When i submit the form and if the text is wrong the error baloon dissapears.
Any idea why?

(http://www.ierotheos.gr/contactform)

by Panos on June 21, 2011 at 12:02 pm. #

Hey Cedric nice plugin.

Got an issue though trying to use it with the jquery ui dialog boxes. I’ve got a registration form that dialog opens up on top of my parent page when I open it and The error messages get tagged onto the page at the very bottom of the parent page instead of being displayed in the correct place.

Any suggestions how to resolve?

Thanks

by Dan DeGagne on June 23, 2011 at 5:33 pm. #

Never mind my bad. Error was with the css script line. Works beautifully.

by Dan DeGagne on June 23, 2011 at 5:52 pm. #

Hi,

I love this plugin. It’s a wonderful plugin. I am new to js and jquery but am able to use it easily.

My only problem is that I am trying to use it in jquery ui dialog. It doesn’t seem to work.

Can anyone point me in the right direction?

by kofi on July 2, 2011 at 8:51 am. #

Thank you for sharing this information. The information was very helpful and saved a lot of my time.

by hollister uk on July 18, 2011 at 11:23 pm. #

Hi, i’m trying to use this plugin but i have a big problem. Everthing works fine but when i try to switch a page the “Required-Box” ist sill there. Could it be that the plugin doesn’t work when you only load parts of the site?

If you don’t understand: it’s so: my site has 3 parts left top and middel. when you switch the middel party the other two will not load again. And here comes the probleme. the plugin does not remove.

Pls help me ;)

by Phil on July 23, 2011 at 8:48 am. #

Great plugin. Any ideas of how to hide error messages after sometime (timeout)?

by Subhash on July 23, 2011 at 11:28 pm. #

Hi I am having problems with the datepicker validation, i know you have put a blur event for the class ‘datepicker’ however it is still not working for me, the code i have is as follows

$(document).ready(function(){
$(‘.datepicker’).datepicker({
dateFormat: ‘dd/mm/yy’,
changeMonth: true,
changeYear: true
});
$(“#aspnetForm”).validationEngine(‘attach’);
});

by Dave on July 27, 2011 at 10:44 am. #

This validation is so nice and helpful but have a problem..

it doesnt work on mozila firefox 3.6..

is there any sollution ?

by Syed Kamran on July 28, 2011 at 3:17 am. #

Hello !

I use the ‘validationEngine’ for a form.
It works fine.
Some fields of the form have a label like this.

name: *

Can i use the validationEngine for generating a tooltip ?
I would appreciate an information.

Your sincerly

Stephan

by Stephan on August 1, 2011 at 9:06 am. #

Just a question (not related with your plugin) about your form example http://www.position-relative.net/creation/formValidator/demos/demoHooks.html

Why are you wrapping the input element of your form inside a label element?

Field Name

in place of

Field Name

Is there any reason ?

by dervalp on August 6, 2011 at 12:16 pm. #

Mhh This form esacpes html tag ;p

So

label
span
input

in place of

fieldset
label with for
input

by dervalp on August 6, 2011 at 12:18 pm. #

Could you please convert the code for AJAX into JSP aspecially on the ajaxValidateFieldUser.php

by sichipan on August 24, 2011 at 10:49 am. #

Hi there.I’m beginner here^^

Can this validation use with append() method?

anyone know how to do it??

var index=1;
function get()
{
$(“#txtfield”).append(“Name : “);
index++;
}

by kenpoo on August 28, 2011 at 2:02 am. #

To all,

Just to inform you all that ‘http://phptalentguru.wordpress.com’ is copying our work to their blog without even giving credit or reply to the original post author.

I have written the original post with what changes I have made in Cedric’s validationEngine plugin. http://amolnw.wordpress.com/2011/05/08/jquery-validationengine-extended-jquery-form-validations/ but http://phptalentguru.wordpress.com copied my entire post and published it onto his wordpress blog.

Can you please guide me the way to prevent it and make him to stop these kind of forgery? It happend with me.. sooner or later it could happen with you also…

Please write to me at amolnw2778@gmail.com

by Amol Nirmala Waman on September 2, 2011 at 2:06 am. #

Hi,

I’m trying to make ajax user validation and not let them submit the form

by Arthur on September 10, 2011 at 1:28 pm. #

Hi, I just started using the plugin, and wonder i need to dynamically change the validation class assignment based on the choice of a previouse select box but i cannot seem to get it to recognize the new calls on the fly ex: user chooses “contact by email” i update the email input to addClass, here is the sample code:

$(“#pref_method”).change(function() {
var val = $(this).val()
if (val==”Please contact me by Phone”) {
$(“#phone”).addClass(“validate[required]“)
$(“#email”).removeClass(“validate[custom[email]]”)
} else if (val==”Please contact me by E-Mail”) {
$(“#email”).addClass(“validate[custom[email]]”)
$(“#phone”).removeClass(“validate[required]“)
}
$(“#form1″).validationEngine()
});

I tried as you can see calling the validation engine again thinking it might need to be updated, however the validation never fires using this tecnique, so do you have a suggestion.

Thanks for the nice plugin

by Larry on October 29, 2011 at 4:49 pm. #

Never mind, i discovered that i needed to detach and then attach after setting the validation class on the fly, works great now.

Thanks for the nice plugin.

by Larry on October 29, 2011 at 6:09 pm. #