A jquery inline Form validation

Document directory

• Get this to work
• Customizations
• Custom functions call (validate from any function you created)
• I want to validate directly from Javascript
• Inline Ajax Validation
• Ajax submitting
• Debug mode

Official Demo:

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.

View demo

(With Ajax submit)
View demo

More informations about how to integrate it with the Asp.net MVC Framework

Coming in v1.7
Window resize
Overflow hidden support
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.

1. <LINK rel = "stylesheet" href = "CSS/validationengine.jquery.css" type = "text/CSS" Media = "screen" charset = "UTF-8"/>
2. <SCRIPT src = "JS/jquery. js" type = "text/JavaScript"> </SCRIPT>
3. <SCRIPT src = "JS/jquery. validationEngine-en.js" type = "text/JavaScript"> </SCRIPT>
4. <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 cocould use a class too.

1. $ (Document). Ready (function (){
2. $ ("# Formid"). validationengine ()
3. })

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.

1. <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
Funccall: Validate custom functions outside of the engine Scope

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.

1. "Telephone ":{
2. "RegEx": "/^ [0-()] + $ /",
3. "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
Shocould look like this:

1. <LINK rel = "stylesheet" href = "CSS/validationengine.jquery.css" type = "text/CSS" Media = "screen" charset = "UTF-8"/>
2. <SCRIPT src = "JS/jquery. js" type = "text/JavaScript"> </SCRIPT>
3. <SCRIPT src = "JS/jquery. validationEngine-fr.js" type = "text/JavaScript"> </SCRIPT>
4. <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,

1. $ ("# Formid"). validationengine ({
2. Inlinevalidation: false,
3. Success: false,
4. Failure: function () {callfailfunction ()}
5. })

Change validation event trigger
You can change the event that trigger the validation in the settings, default is blur

1. $ ("# Formid"). validationengine ({
2. Validationeventtriggers: "keyup blur", // will validate on keyup and blur
3. Success: false,
4. Failure: function () {callfailfunction ()}
5. })

No scrolling

1. $ ("# Formid"). validationengine ({scroll: false })

Validate and return true or false
Can be used anywhere in your script

1. 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.

1. $ ("# 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.

1. $ ("# Formid"). validationengine ({
2. Promptposition: "topright", // openning box position, implemented: topleft, topright, bottomleft, centerright, bottomright
3. Success: false,
4. Failure: function (){
5. })

Custom functions call (validate from any function you created)

Sometimes you need to validate complex rules that are not supported in this engine. with this feature you can validate from any function in JavaScript and return true if there is and error and false if the function validate correctly.

In your field Add:

1. <Input value = "" class = "Validate [required, funccall [validate2fields] Text-input" type = "text" id = "lastname" name = "lastname"/>

In your language JS file have something like (nname is the function name to call ):

1. "Validate2fields ":{
2. "Nname": "validate2fields ",
3. "Alerttext": "* You must have a firstname and a lastname "}
4. }

Now the custom function that cocould be anywhere in your JS

1. Function validate2fields (){
2. If ($ ("# firstname"). Val () = "" | $ ("# lastname"). Val () = ""){
3. Return true;
4. } Else {
5. Return false;
6. }
7. }

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 shoshould 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 wocould 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 obviusly 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

1. $ ("# Formid"). validationengine ({
2. Ajaxsubmit: True,
3. Ajaxsubmitfile: "ajaxsubmit. php ",
4. Ajaxsubmitmessage: "Thank you, We Have ed your inattention! ",
5. Ajaxsubmitextradata: "securitycode = 38709238423 & name = John ",
6. Success: false,
7. Failure: function (){}
8. })

In your PHP, if the form validate, the variable$ IsvalidateNeed 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:

1. $ Arrayerror [0] [0] = "# email"; // fieldid
2. $ Arrayerror [0] [1] = "your email do not match... Whatever it need to match"; // text Error
3. $ 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:

1. // Replace "success: false," by: Success: function () {callsuccessfunction ()},
2.  
3. $ ("# Formid"). validationengine ({
4. Success: false,
5. Failure: function () {callfailfunction ()}
6. })

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 shocould help you get everything in line to get the script working in your environment.

 

Stable with jquery 1.4.2

Download the source code

View demo

Tested on:
Internet exploder 6 & 7
Firefox 3 +
Safari 4
Chrome 1 +

Download the older version,Stable with jquery 1.3.2
1.6.2

 

From: http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/