1
Form Validation Engine 1.7 Online
It’s been a long time since I updated the validation engine. In this release the engine get a very small code overhaul, a fix to the inline ajax validation and also, and more importantly, a new feature makes its entrance:
Validation in overflown div and lightbox with scrollable content is now supported
To get the supported mode you need to add this option when instancing your plugin:
-
$("#formID").validationEngine({
-
containerOverflow:true, // Enable Overflown mode
-
containerOverflowDOM:"#divOverflown" // The actual DOM element container with overflow scroll on it
-
})
(With overflown hidden parent)
View demo
The big change in this method is that normally the engine will append every error boxes to the body. In this case it will append every error boxes before the input validated. This add a bit of complexity, if you want the error box to behave correctly you need to wrap the input in a div being position relative, and exactly wrapping the input width and height. The easiest way to do that is by adding float:left, like in the example provided.
The default top right position is currently the only supported position. Please use this mode only in overflown div and scrollable boxes, it is slower and a bit less stable (I have been using the engine for 2 years, but only one 1 month with this method). Also, the scrolling will be applied to the overflown parent, not the document body.
Thats it! Hope you like it
You can download the validation engine on the API description page.
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.
18 Comments to “Form Validation Engine 1.7 Online”
Leave a comment
Articles
Some Tweets
- looked at bell and videotron for a tv network solution, full of hidden rules, went with shaw direct @ShawDirect_News , honest service
- interesting post about Cross-domain localStorage http://bit.ly/9dfW8F
- back to work after 2 week of renovation on my house, glad to be back at doing javascript..
- traded my computer for this http://bit.ly/cCKVbr for 2 week, want my computer back..
- kind of old, bit I like it http://www.thereisnopagefold.com/
- I really have a love/hate relationship with the E texteditor, so good but so bad at the same time
And you said you’d never touch this code again. Hah!
maybe I lied a bit
Hello,
I don’t understand how to make a Function Call Validation, i use the example but it doesn’t work.
How does it do to make a custom function.
I have 2 radiobuttons with the values (“oui” and “non”).
To validate the form I need a double validation :
- a radiobutton must checked
- and the value must to “oui”
Is it possible ?
I tried this :
In the form I put this :
Oui
Non
In my language js :
“validatecg”:{
“nname”:”validatecg”,
“alertText”:”* Vous devez accepeter les CG”}
}
And in the head of the page :
function validatecg(){
if($(“#acceptation:checked”).length !== 0;){
return true;
}else{
return false;
}
}
Can You help me ?
Very thanks
Hello visionmaster,
did you finally fix the problem with funcCall? I need to use it but doesn’t work…
A post in the support forum recommends to add some code to jquery.validationEngine.js for 1.6.3, i tried but couldn’t fix it on 1.7.
Maybe you already solved the problem, could you give me some help?
Thank you!
That should work
did you try to debug with firebug and console.log? will try to have a look this week
Cedric, you did a good job!
But i’m a Russian student programmer just started to learn Ajax.
So, help me please.
I try to submit form. If I get isValidate=true everything seems to be OK.
But,
1. If i get false, I can’t understand how to code it, how to use array there.
2. How to add, for example, some message from my PHP file to the text instead of form without reloading page?
Hope, you understand my English
Hi, great work Cedric.
I have one quick question if you don’t mind helping out.
I am wondering how I can close all prompts on the form after a button is clicked, or only have them show for a certain amount of time.
Basically, I am using the form in a DIV which slides in from the top of the page, but if a user does not submit the form the errors stay on the page even after the div has disappeared.
I’ve read the closePrompt comments but I’m new to jquery and am having trouble following it.
Thanks a lot!
Hi: I use the following methodology to clear the errors:
$(“.formError”).children().remove();
$(“.formError”).remove();
Insert this code when the user “closes” the form (slides up);
Hope this helps—
hi sir
when we click on submit button or when display error boxes they all are in “Absolute position” and all boxes are placed outside the form but I want to it all error boxes come in inside the form in relative position with error field.
Please help me here.
Actually I m using this form in my site. It is excellent form.
Thanks sir
Hi Wendi, thanks for that. Sorry to be a complete newbie but how exactly do I code that into the button that closes the div?
@pradeep : you need to use the new feature, Validation in overflown div
@John you need to use : $.validationEngine.closePrompt(“.formError”,true) as described in the api page, there is also an example in the demo source code
I do not check select selected or not.
I write code:
Select city
Moscow
Sochi
Peter
and no validation!
What is the problem? What am I doing wrong?
When I adding comments removed all html tags.
I have a problem using the following code on jquery :
$(‘#buttonforsubmit’).click(function () {
$.post(“anyfile.php”,$(“form”).serialize(), function(data)
{
$(“#container”).html(data);
});
});
The div container is on the same page.
Events that are fired do not understand, but does not load the information I need on the div. I also overflows firefox
I tried changing input type submit to type button, and the above code worked. But not validated.
Is there any solution?
Thanks
Hello,
I made some FRENCH translation and correction.
If you want more, send me a mail
$.validationEngineLanguage.allRules = {“required”:{
“regex”:”none”,
“alertText”:”* Ce champs est requis”,
“alertTextCheckboxMultiple”:”*Choisir une option”,
“alertTextCheckboxe”:”* Cette case à cocher est requise”},
“length”:{
“regex”:”none”,
“alertText”:”* Entre “,
“alertText2″:” et “,
“alertText3″:” caractères requis”},
“maxCheckbox”:{
“regex”:”none”,
“alertText”:”* Nombre maximal atteind”},
“minCheckbox”:{
“regex”:”none”,
“alertText”:”* Veuillez choisir “,
“alertText2″:” options”},
“confirm”:{
“regex”:”none”,
“alertText”:”* Votre champs n’est pas identique”},
“telephone”:{
“regex”:”/^[0-9\-\(\)\ ]+$/”,
“alertText”:”* Numéro de téléphone invalide”},
“email”:{
“regex”:”/^[a-zA-Z0-9_\.\-]+\@([a-zA-Z0-9\-]+\.)+[a-zA-Z0-9]{2,4}$/”,
“alertText”:”* Adresse email invalide”},
“date”:{
“regex”:”/^[0-9]{4}\-\[0-9]{1,2}\-\[0-9]{1,2}$/”,
“alertText”:”* Date invalide, format YYYY-MM-DD requis”},
“onlyNumber”:{
“regex”:”/^[0-9\ ]+$/”,
“alertText”:”* Chiffres seulement acceptés”},
“noSpecialCaracters”:{
“regex”:”/^[0-9a-zA-Z]+$/”,
“alertText”:”* Aucune caractère spécial acceptés”},
“onlyLetter”:{
“regex”:”/^[a-zA-Z\ \']+$/”,
“alertText”:”* Lettres seulement acceptées”},
“ajaxUser”:{
“file”:”validateUser.php”,
“alertTextOk”:”* Ce nom est déjà pris”,
“alertTextLoad”:”* Chargement, veuillez patienter”,
“alertText”:”* Ce nom est déjà pris”},
“ajaxName”:{
“file”:”validateUser.php”,
“alertText”:”* Ce nom est déjà pris”,
“alertTextOk”:”*Ce nom est disponible”,
“alertTextLoad”:”* Chargement, veuillez patienter”},
“validate2fields”:{
“nname”:”validate2fields”,
“alertText”:”Vous devez avoir un prénom et un nom”}
}
@Cedric Thanks so much for your help, and the great script. I’ve bought you a beer!
Hello,
First and foremost, thanks for great tool. It has solved a big problem I was facing in the past, but now with this, it is under my belt.
I do need a way to be able to disable the validation engine when a certain button is clicked. For example, if users want to save the data they have entered into a form, actually submit it, I want a “Save” button which doesn’t check for validation, and a “Submit” button which will check for validation in the same form. Is that possible, and if so, how can I do it? I have spent much time already trying to figure out how to do it, without any luck. Any help would be greatly appreciated.
man… you are genious.. i am going to applying it everywhere in my new project..