When it comes to form validation, it’s hard to have a versatile solution that works with every form. Figuring out how to display errors is not a simple task. This is something I tried to remedy with this script. When an error needs to be displayed, the script creates a div and positions it in the top right corner of the input. This way you don’t have to worry about your HTML form structure. The rounded corner and shadow are done with CSS3 and degrade well in non compliant browsers. There is no images needed.
(With ajax submit)
View demo
Current developers:
Cedric Dugas
Coming in v1.7
Window Resize
BugFixes
Localisation language is also available, I already did a (poor) french localisation. Do not include more than one localization at a time in a page. Custom regEx rules with error messages can also be added very easily for you crazy guys that understand how regEx rules actually work.
Get this to work
First add the jquery library and the jquery.validationEngine.js, js language and css to your head.
-
<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css" media="screen" charset="utf-8" />
-
<script src="js/jquery.js" type="text/javascript"></script>
-
<script src="js/jquery.validationEngine-en.js" type="text/javascript"></script>
-
<script src="js/jquery.validationEngine.js" type="text/javascript"></script>
When this is done, you need to call the form you want to validate. I use an ID but you could use a class too.
-
$(document).ready(function() {
-
$("#formID").validationEngine()
-
})
After you need to add a class on the input you want to validate, you can stack as much rules as you want. If you use multiple class on the input please put validate[] rules first.
-
<input class="validate[required,custom[onlyLetter],length[0,100]]" name="firstname" type="text" />
Here are the rules already implemented in the validator:
optional: Special: Only validate when the field is not empty *Please call optional first
required: Field is required
length[0,100] : Between x and x characters allowed
maxCheckbox[7] : Set the maximum checkbox autorized for a group
minCheckbox[7] : Set the minimum checkbox autorized for a group
confirm[fieldID] : Match the other field (ie:confirm password)
telephone : Match telephone regEx rule.
email : Match email regEx rule.
onlyNumber : Numbers only
noSpecialCaracters : No special characters allowed
onlyLetter : Letters only
exemptString : Will not validate if the string match
date : Invalid date, must be in YYYY-MM-DD format
Customizations
Custom RegEx Rules:
You can create custom rules easily, only add your custom rule in the json object, you can take telephone as an example, just copy and paste under it.
-
"telephone":{
-
"regex":"/^[0-9-()]+$/",
-
"alertText":"* Invalid phone number"},
Language localization:
In the js folder you will find jquery.validationEngine-fr.js , in this file you have the json object used to create the validation rules, you can localize this file in any language you like. Add this file just before jquery.validationEngine.js. Your head document should look like this:
-
<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css" media="screen" charset="utf-8" />
-
<script src="js/jquery.js" type="text/javascript"></script>
-
<script src="js/jquery.validationEngine-fr.js" type="text/javascript"></script>
-
<script src="js/jquery.validationEngine.js" type="text/javascript"></script>
Optional inline validation
You can now validate only on form submit by using this customization: inlineValidation: false, in your DOM ready,
-
$("#formID").validationEngine({
-
inlineValidation: false,
-
success : false,
-
failure : function() { callFailFunction() }
-
})
Change validation event trigger
You can change the event that trigger the validation in the settings, default is blur
-
$("#formID").validationEngine({
-
validationEventTriggers:"keyup blur", //will validate on keyup and blur
-
success : false,
-
failure : function() { callFailFunction() }
-
})
Validate and return true or false
Can be use anywhere in your script
-
alert($("#formID").validationEngine({returnIsValid:true})); // alert will return true or false
Do not unbind the engine submit event upon success function
You may not need this setting, sometimes you want the engine to stay binded on submit even if the success function is fired.
-
$("#formID").validationEngine({unbindEngine:false}));
Prompt positioning
Positioning is not perfect, this is a good start but much work is needed to have this working in every situation, when you call on dom ready change this setting.
-
$("#formID").validationEngine({
-
promptPosition: "topRight", // OPENNING BOX POSITION, IMPLEMENTED: topLeft, topRight, bottomLeft, centerRight, bottomRight
-
success : false,
-
failure : function() {
-
})
I want to validate directly from javascript
You can call a validation like this: $.validationEngine.loadValidation(“#date”)
Open and close prompts on everything
Use my prompt on everything you want like a div element. You can call a prompt this way: $.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;
Inline 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.
Ajax Submitting
This send your form to a specific php file for manipulation, you can return field errors or a success text message. The ajax success function described below can still be called and will be executed after the ajax submit validation occur.
Extra Data
You can add extra data to apss along with this setting: ajaxSubmitExtraData
-
$("#formID").validationEngine({
-
ajaxSubmit: true,
-
ajaxSubmitFile: "ajaxSubmit.php",
-
ajaxSubmitMessage: "Thank you, we received your inscription!",
-
ajaxSubmitExtraData: "securityCode=38709238423&name=john",
-
success : false,
-
failure : function() {}
-
})
In your php, if the form validate, the variable $isValidate need to be set to true the form will disappear and the success message will appear instead. If it does not validate set $isValidate to false follow this syntax to call an array of errors :
-
$arrayError[0][0] = "#email"; // FIELDID
-
$arrayError[0][1] = "Your email do not match.. whatever it need to match"; // TEXT ERROR
-
$arrayError[0][2] = "error"; // BOX COLOR
AJAX Success and failure call to actions
If you want to post your form in AJAX you can define a success and failure function to be executed on form submit and there will be no page reload. In the jquery.validationEngine.js. Look in the document ready for this:
-
// replace "success: false," by: success : function() { callSuccessFunction() },
-
-
$("#formID").validationEngine({
-
success : false,
-
failure : function() { callFailFunction() }
-
})
Debug Mode
The debug mode appears when there is something wrong with the validation engine. It has a set of trigger to look upon validation and try to help you accordingly, it should help you get everything in line to get the script working in your environment.
UPDATE: This version break compatibility with the older versions, I would suggest to be very careful if you are updating, you need an id attribut on every input you validate!
Download the source code View demo
Tested on:
Internet Exploder 6 & 7
Firefox 3+
Safari 4
Chrome 1+
Download the older version, 1.6.2
Version 1.6.3 Online
Feb 1 2010, release v.1.6.3: bugfixs from forum + exempString rule addition, update to jQuery 1.4
November 23, release v.1.6.2: bugfix script loaded via ajax,
November 23, release v.1.6.1: Refactoring, external loadvalidation() is back working, languages are now ALL loaded externally, added setting to not unbind form on success,
October 29, release v.1.6: unbind validation when success function is called, option returnIsValid added
October 27, release v.1.5: Added debug mode, event triggerer can be specified in setting and checkbox bug with cakephp corrected
September 17, release v.1.4: More frameworks support, changes with the minCheckbox and maxCheckbox
August 25, release v.1.3.9.6: Ajax submit, prompt positioning, bug correction with multiple forms
August 13, release v.1.3: Ajax validation, prompts usable outside the plugin, minor CSS corrections
July 12, release v.1.3: Validation with ids instead of name, minor CSS corrections, optional inline validation.
June 5, release v.1.2.1: Added optional validation
June 5, release v.1.2: Less error prone reg Ex, corrected an error with multiple form on the same page
June 4, release v.1.1: added date validation and select required validation, corrected errors with group radio input
June 1, release v.1.0
Comments are closed due to the overwhelming number, please use the forums for support.
If you like and use this script, please consider buying me a beer, it’s cheap and a simple way to give back!
Do you know what is going on here?
if($.validationEngine.submitValidation(this,settings) == false){
if($.validationEngine.submitForm(this,settings) == true) {return false;}
}
$.validationEngine.submitForm(this,settings) == true always seems to evaluate to true, which then returns false…
Man I wish I could post code! heh, it keeps dumping my comments. There is an issue with this line:
if($.validationEngine.submitForm(this,settings) == true) {return false;}
Trciky, I must admit.
This piece of Your code is particulary important:
$(document).ready(function() {
$(“#form”).validationEngine({
…
When You submit the form, page refresh itself and functions in $(document).ready(function() part are executed when Your page finishes loading. Now, I think that for some reason Your fields keep filled data and therefore form is submitting over and over again in a loop. Try to submit Your data to some other page, for example page.html and see if your script goes to that page when You click submit.
One other thing, why do You have two fields with the same name:
<input name=”submit” type=”hidden” value=”true” />
<input name=”submit” type=”submit” value=”Send Form” />
The reason the form kept executing when I had the submit() enabled was that the form validated successfully so it fired the success: function() code part of that code was to submit the form.. again, so then it validated successfully again, and then submitted the form again. All the document.read does is to enable the validationEngine and then bind the form tag to a custom submit routine.
I did set the form to submit to a different page, which is the way it is currently.
The reason I had the double submit tags was that if someone just hit the enter key instead of clicking on the submit button then the “submit” variable would still be populated. I could have called the hidden one “submitted”, it doesn’t really matter.
And this line is still commented:
//$(‘form’).submit();
Does it work with action set to test.html?
One other thing that keeps bugging me, since I cant just copy and paste Your code to play with it, why do You have return true after form submit? I didnt use it in my project and I dont see a need for it in this case.
No neither works, when I comment out this line in the validator class:
if($.validationEngine.submitForm(this,settings) == true) {return false;}
Then when the script succeeds it submits the form, but then it doesn’t fire the “success” part. And because it’s not firing the success part the action part of the form is not being set by my script *heh* Oye!!!
Right now I have return true just to make sure that the form is indeed returning true to go ahead and submit the form. It probably defaults to return true, but at this point I just want to make sure
You wont beleieve what I just did.
I got all Your js and css files. I couldnt resist, I needed to try it myself.
This is what I had and this works, it goes to test.htm page:
var formAction = ’security-form.htm?action=submit’;
formAction = ‘test.htm’;
And this:
else {
//alert(‘form should have fired’);
$(‘form’).attr(‘action’,formAction);
$(“#form”).submit();
//return true;
}
One more thing, You shouldnt submit data to static html pages, it can cause some server errors.
Once I removed alert form the success part it went through.
Hope this helps.
*sigh* why does it work for you.. could you check my js again? Im pretty sure I just set it to what you have and it’s not working still
I didn’t know about submitting data to a static page.. what’s the issue? it would actually throw a 404 erorr which I intercept, since test.htm doesnt actually exist.
Ok it’s working, but I am getting a javascript recursion problem and Im not sure if it’s because of the .submit() issue. My guess is yes, but I hope I am wrong
Do You have any error in Java console?
And about submitting, static html cant process from fields in usual way.
So in order to process it, You should use something like php, asp, asp.net, jsp or something similar, there is many possibilities, but html is not one of them.
One step at a time, first to solve this problem with submit.
heh actually Im a php developer
The extension is .htm but the whole site is pointing to one php file. I have that part covered, it’s just this validation thing! The old version was working great, this one.. well works great except for when I wanted to disable forms if javascript was not turned on.. now bam, kaboooooom! 
It’s a bit annoying I can not figure out why it is working the way it is
Sorry If I sounded a little bit rude about Your knowledge. That was not my intention.
Im so pleased that Cedric provided us opportunity to learn through his great work.
I spent day and a half for my problem with this plugin before I solved it, but I learned a lot.
Anyway, back on your problem, so now it works but You have recursion problem?
Is there any error about javascript in error console?
Yeah it says too many recursions and that’s pretty much it. Im actually leaning towards that it’s an ajax issue. It sounds like it thinks there is an ajax request when I have success set, so it is submitting the form, but we’re just not seeing it since it’s in the background. And no worries about my knowledge, you just met me.. no way for you to know much about me, except that Im having a hard time getting this thing to work!
Ok the issue is this line:
if ($.validationEngine.settings.success){ // AJAX SUCCESS, STOP THE LOCATION UPDATE
$.validationEngine.settings.success && $.validationEngine.settings.success();
return true;
}
Not sure how to fix it yet though
Ok i got it working. It was indeed the line I mentioned above, so I changed it to:
if ($.validationEngine.settings.success()){ // AJAX SUCCESS, STOP THE LOCATION UPDATE
return true;
}
@Bosko: thanks for your help in troubleshooting this.. whew what a pain!
@Cedric: Could you look into this issue whenever you release a new version? Basically I didn’t want to use Ajax, but I still wanted to use the success function. Thanks again for a great script!
Great Rick. Im also looking forward to the correction of success call.
Glad that You can now continue with Your work.
Are you interested in italian localization?
[...] A jQuery inline form validation, because validation is a mess Të Position Absolute When it comes to form validation, it’s hard to have a versatile solution that works with every form. Figuring out how to display errors is not a simple task. This is something I tried to remedy with this script. When an error needs to be displayed, the script creates a div and positions it in the top right corner of the input. This way you don’t have to worry about your HTML form structure. The rounded corner and shadow are done with CSS3 and degrade well in non compliant browsers. There is no images needed. [...]
No offense, this plugin looks great at a first glance but is extremely frustrating to get to work. The documentation written here is very hard to grasp and I’ve just spent the last 3 hours trying to get it to work without getting random errors.
Also, one other thing to note is that I cannot find anywhere any reference about getting this to work WITHOUT a form and without a submit button.
Any help would be much appreciated.
Hi.
I have this problem:
when i call $.validationEngine.closePrompt(”#date”)
prompt for “date” will close but the very next time when I have wrong date and need validation on it the prompt wont show but the form will not submit (which means that validation on this field is done)
Hi.
I have this problem:
when i call $.validationEngine.closePrompt(”#date”)
prompt for “date” will close but the very next time when I have wrong date and need validation on it the prompt wont show but the form will not submit (which means that validation on this field is done)
[...] Demo – Árticulo original Categorías:Utiles, interfaz, jQuery Etiquetas:interfaz, jQuery, plugin, recursos [...]
Dejane can You show some piece of Your code?
Ok, I will try to describe my code.
The form in which is my input element for validation is in an DIV element.
So:
I think that the problem persist because I use
$(“#content”).load(“/dynsale/web/CategoryParam.jsp”);
to fill the div. So I have an menu and when I click an every time I click item on it I call $(“#content”).load(“/dynsale/web/CategoryParam.jsp”); to fill the div.
When I click an menu item I also call $.validationEngine.closePrompt(”#code”) to close previous validation prompt for my input element. This works good the prompt is closed but the very next time when I have wrong input and need validation on it the prompt wont show
Did You try to use buildPrompt?
No, my input element still have validation event bind on it when I reload JSP page. I have
this script in JSP page
// SUCCESS AJAX CALL, replace “success: false,” by: success : function() { callSuccessFunction() },
$(“#AddCategoryParamForm”).validationEngine({
success : false,
failure : function() {}
})
// Exterior prompt close example
which means validation on form elements is set again.
I have done debug on jquery.validationEngine.js and noticed in row 281
is written ($(“div.”+prompt).size() ==0) ? $.validationEngine.buildPrompt(caller,promptText,”error”) : $.validationEngine.updatePromptText(caller,promptText);
When I call call $.validationEngine.closePrompt(”#date”) and after that reload my div “content” with same page in row 281 $(“div.”+prompt).size() =1 for my validation input element. and that is why I do not see new validation prompt again
Let me know if I understood You correctly.
You bind validationengine on #AddCategoryParamForm when You load a page. Then, when You click some menu item You poopulate this div with some content You want to validate?
Nice Tools
But one missing thing is show alert in Left side of fields, When Page direction set to RTL We need to show message in Left Side of field but in this version it is impossible
Yes that is correct
But when I populate this div with some content I bind validationengine on #AddCategoryParamForm
[...] A jQuery inline form validation, because validation is a mess Të Position AbsoluteWhen it comes to form validation, it’s hard to have a versatile solution that works with every form. Figuring out how to display errors is not a simple task. This is something I tried to remedy with this script. When an error needs to be displayed, the script creates a div and positions it in the top right corner of the input. This way you don’t have to worry about your HTML form structure. The rounded corner and shadow are done with CSS3 and degrade well in non compliant browsers. There is no images needed. [...]
I have tried various regex for file extensions, but non of them work. Has anyone got one that works!? They worked on the older versions.
I’m copying part of the demoSubmit.html file and I can’t fint why, when it works, the form gets submitted twice and to success messages appear.
Any ideas?
This would be a great plugin, if you didn’t take so much control away from the user. As far as I can see there are two options once the form validates: call the submit event, or use your prescribed ‘ajax event’ which is limited in customization to the URL!!! Unfortunately I’ve got a lot more work I need to do after validation and before I submit the form via ajax. I need to wire up callbacks for an ajax loader, dialog close event, ajax preload event and an ajax success event.
why can’t we do this:
if(“#formid”).isValid() {
// do all the work I need to do
// Call my custom ajax method
} else return;
As far as I can see the only options we have are to submit the form or to use your ajax method.
I think you would have a far far better product if you picked up the official (yet abandoned) JQuery.Validate plugin, and enhanced it to make use of your beautiful tooltips. Thus providing a cutting edge and highly extensible validation system, with some very nice eye candy.
Bug that will affect RoR users – If the id of a field contains ‘[]‘ then the prompts are not disappearing even after the field’s error is addressed.
One more thing – any validation that has a regex in it must be called as ‘custom[validation]‘
For example, if your field needs the email validator rule, then you need -
ruby forms will be compatible with 1.4, I will probably released it next week,
@Kevin I like your ideas, and a beforesent option would be nice, as for using the bassistance plugin,
I needed a script that would be custom to my need and would be blazing fast to impliment, and this is doing it 90% of the time, and when it’s not, it is really easy to modify it.