Skip to content
Browse files

version 2.0

  • Loading branch information...
1 parent e8f5335 commit 471d273bc060fb91df9a93ac8e5d44f1d4ccdd79 @posabsolute committed Jan 17, 2011
Showing with 5,735 additions and 1,738 deletions.
  1. +6 −0 .classpath
  2. +5 −0 .gitignore
  3. +19 −0 .project
  4. +24 −0 .rockstarapps
  5. +3 −0 .settings/com.aptana.editor.php.prefs
  6. +4 −0 .settings/org.eclipse.core.resources.prefs
  7. +0 −279 DOCUMENTATION.html
  8. +536 −0 README.md
  9. +24 −0 TODO.txt
  10. +0 −34 ajaxSubmit.php
  11. BIN css/screenshot.png
  12. +16 −16 css/template.css
  13. +142 −81 css/validationEngine.jquery.css
  14. +94 −0 demoAjax.html
  15. +78 −0 demoCheckbox.html
  16. +111 −0 demoFieldTypes.html
  17. +151 −0 demoLiveEvent.html
  18. +236 −0 demoMultipleForms.html
  19. +146 −0 demoOverflown.html
  20. +149 −110 demoRegExp.html
  21. +65 −0 demoShowPrompt.html
  22. +65 −0 demoValidationComplete.html
  23. +209 −0 demoValidators.html
  24. +45 −153 index.html
  25. +0 −101 indexOverflown.html
  26. +167 −0 js/jquery-1.4.4.min.js
  27. +123 −80 js/jquery.validationEngine-en.js
  28. +123 −80 js/jquery.validationEngine-es.js
  29. +117 −77 js/jquery.validationEngine-fr.js
  30. +103 −0 js/jquery.validationEngine-it.js
  31. +122 −80 js/jquery.validationEngine-pt.js
  32. +126 −0 js/jquery.validationEngine-ro.js
  33. +21 −0 js/jquery.validationEngine.closure.js
  34. +1,117 −615 js/jquery.validationEngine.js
  35. +621 −0 js/jquery.validationEngine.old.js
  36. +3 −0 runDemo.bat
  37. +3 −0 runDemo.sh
  38. BIN test/AjaxTestServer$AjaxValidationFieldResponse.class
  39. BIN test/AjaxTestServer$AjaxValidationFormResponse.class
  40. BIN test/AjaxTestServer.class
  41. +202 −0 test/AjaxTestServer.java
  42. BIN test/NanoHTTPD$1.class
  43. BIN test/NanoHTTPD$HTTPSession.class
  44. BIN test/NanoHTTPD$Response.class
  45. BIN test/NanoHTTPD.class
  46. +759 −0 test/NanoHTTPD.java
  47. +0 −32 validateUser.php
View
6 .classpath
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<classpath>
+ <classpathentry kind="src" path="test"/>
+ <classpathentry kind="con" path="org.eclipse.jdt.launching.JRE_CONTAINER"/>
+ <classpathentry kind="output" path="test"/>
+</classpath>
View
5 .gitignore
@@ -0,0 +1,5 @@
+.tmp_*~
+.DS_Store
+/js/jquery.validationEngine.log.txt
+/js/jquery.validationEngine.js.min.js.log.txt
+/js/jquery.validationEngine-en.log.txt
View
19 .project
@@ -6,12 +6,31 @@
</projects>
<buildSpec>
<buildCommand>
+ <name>com.rockstarapps.html.refactoring.WebOptimizer</name>
+ <arguments>
+ <dictionary>
+ <key>rockstarapps-build-file</key>
+ <value>.rockstarapps</value>
+ </dictionary>
+ <dictionary>
+ <key>rockstarapps-build-version</key>
+ <value>1.5</value>
+ </dictionary>
+ </arguments>
+ </buildCommand>
+ <buildCommand>
<name>org.eclipse.wst.jsdt.core.javascriptValidator</name>
<arguments>
</arguments>
</buildCommand>
+ <buildCommand>
+ <name>org.eclipse.jdt.core.javabuilder</name>
+ <arguments>
+ </arguments>
+ </buildCommand>
</buildSpec>
<natures>
<nature>org.eclipse.wst.jsdt.core.jsNature</nature>
+ <nature>org.eclipse.jdt.core.javanature</nature>
</natures>
</projectDescription>
View
24 .rockstarapps
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<rockstarapps>
+
+
+
+
+<file name="js/jquery.validationEngine.js">
+ <min>false</min>
+ <comp>false</comp>
+ <closureCompiler>true</closureCompiler>
+ <gZip>false</gZip>
+ <resolveImports>false</resolveImports>
+ <urlRewriting>false</urlRewriting>
+ <autoBuild>true</autoBuild>
+ <lineLength>-1</lineLength>
+ <autoTimestamps>false</autoTimestamps>
+ <removeLogs>false</removeLogs>
+ <oldFileNames>false</oldFileNames>
+ <dependencies>
+ <file>js/jquery.validationEngine.js</file>
+ </dependencies>
+ <properties/>
+ </file>
+</rockstarapps>
View
3 .settings/com.aptana.editor.php.prefs
@@ -0,0 +1,3 @@
+#Tue Jan 04 12:29:28 EST 2011
+eclipse.preferences.version=1
+phpVersion=php5.3
View
4 .settings/org.eclipse.core.resources.prefs
@@ -0,0 +1,4 @@
+#Mon Dec 13 15:35:01 EST 2010
+eclipse.preferences.version=1
+encoding//js/jquery.validationEngine-fr.js=UTF-8
+encoding//js/jquery.validationEngine-pt.js=UTF-8
View
279 DOCUMENTATION.html
@@ -1,279 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
- "http://www.w3.org/TR/html4/strict.dtd">
-
-<html lang="en">
-<head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>documentation</title>
- <meta name="generator" content="Studio 3 http://aptana.com/">
- <meta name="author" content="Cedric Dugas">
- <!-- Date: 2011-01-04 -->
-</head>
-<body>
-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.
-
-<p class="clearfix"><a class="download" target="_blank" href="http://github.com/posabsolute/jQuery-Validation-Engine">Download the source code</a> <a class="demo" href="http://www.position-relative.net/creation/formValidator/" target="_blank">View demo</a></p>
-<p class="clearfix"><strong>(With ajax submit)</strong><br clear="all"><a class="demo" href="http://www.position-relative.net/creation/formValidator/demoSubmit.html" target="_blank">View demo</a> </p>
-
-
-
-<p class="clearfix"><strong>(With overflown hidden parent)</strong><br clear="all"><a class="demo" href="http://www.position-relative.net/creation/formValidator/indexOverflown.html" target="_blank">View demo</a> </p>
-
-<strong>Please report issues in the google code project</strong><br /><a href="http://www.pieterg.com/post/2010/03/18/Good-looking-validation-with-ASPNET-MVC-20-Custom-Validation.aspx">More informations</a> about how to integrate it with the asp.net MVC framework
-
-
-<strong>Coming in v1.8</strong>
-Window Resize
-
-
-<p><img src="/wp-content/themes/default/images/post/img_form.jpg"></p>
-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.
-<h3>Get this to work</h3>
-First add the jquery library and the jquery.validationEngine.js, js language and css to your head.
-<pre lang="html">
-<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>
-</pre>
-
-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.
-<pre lang="html">
-$(document).ready(function() {
- $("#formID").validationEngine()
-})
-</pre>
-
-After you need to add a class on the input you want to validate, you can stack as much rules as you want. <strong>If you use multiple class on the input please put validate[] rules first.</strong>
-<pre lang="html">
-<input class="validate[required,custom[onlyLetter],length[0,100]]" name="firstname" type="text" />
-</pre>
-
-Here are the rules already implemented in the validator:
-
-<strong>optional</strong>: <strong>Special:</strong> Only validate when the field is not empty <strong>*Please call optional first</strong>
-<strong>required</strong>: Field is required
-<strong>length[0,100]</strong> : Between x and x characters allowed
-<strong>maxCheckbox[7]</strong> : Set the maximum checkbox autorized for a group
-<strong>minCheckbox[7]</strong> : Set the minimum checkbox autorized for a group
-<strong>confirm[fieldID]</strong> : Match the other field (ie:confirm password)
-<strong>telephone </strong>: Match telephone regEx rule.
-<strong>email</strong> : Match email regEx rule.
-<strong>onlyNumber</strong> : Numbers only
-<strong>noSpecialCaracters</strong> : No special characters allowed
-<strong>onlyLetter</strong> : Letters only
-<strong>exemptString</strong> : Will not validate if the string match
-<strong>date</strong> : Invalid date, must be in YYYY-MM-DD format
-<strong>funcCall</strong> : Validate custom functions outside of the engine scope
-
-<h3>Customizations</h3>
-<strong>Custom RegEx Rules:</strong>
-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.
-<pre lang="html">
-"telephone":{
-"regex":"/^[0-9-()]+$/",
-"alertText":"* Invalid phone number"},
-</pre>
-<strong>Language localization:</strong>
-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:
-
-<pre lang="html">
-<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>
-</pre>
-
-<strong>Optional inline validation</strong>
-You can now validate only on form submit by using this customization: inlineValidation: false, in your DOM ready,
-<pre lang="html">
-$("#formID").validationEngine({
-inlineValidation: false,
-success : false,
-failure : function() { callFailFunction() }
-})
-</pre>
-
-<strong>Change validation event trigger</strong>
-You can change the event that trigger the validation in the settings, default is blur
-<pre lang="html">
-$("#formID").validationEngine({
-validationEventTriggers:"keyup blur", //will validate on keyup and blur
-success : false,
-failure : function() { callFailFunction() }
-})
-</pre>
-
-<strong>No scrolling</strong>
-<pre lang="html">
- $("#formID").validationEngine({scroll:false})
-</pre>
-
-
-
-<strong>Validate and return true or false</strong>
-Can be use anywhere in your script
-<pre lang="html">
-alert($("#formID").validationEngine({returnIsValid:true})); // alert will return true or false
-</pre>
-
-<strong>Do not unbind the engine submit event upon success function</strong>
-You may not need this setting, sometimes you want the engine to stay binded on submit even if the success function is fired.
-<pre lang="html">
-$("#formID").validationEngine({unbindEngine:false}));
-</pre>
-
-
-<strong>Prompt positioning</strong>
-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.
-
-<pre lang="html">
-$("#formID").validationEngine({
-promptPosition: "topRight", // OPENNING BOX POSITION, IMPLEMENTED: topLeft, topRight, bottomLeft, centerRight, bottomRight
-success : false,
-failure : function() {
-})
-</pre>
-
-<h3>Custom functions call (Validate from any function you created)</h3>
-Sometimes you need to validate complex rules that are not included 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:
-<pre lang="html">
-<input value="" class="validate[required,funcCall[validate2fields]] text-input" type="text" id="lastname" name="lastname" />
-</pre>
-
-In your language js file have something like (nname is the function name to call):
-<pre lang="html">
-"validate2fields":{
- "nname":"validate2fields",
- "alertText":"* You must have a firstname and a lastname"}
- }
-</pre>
-
-Now the custom function that could be anywhere in your JS
-<pre lang="html">
- function validate2fields(){
- if($("#firstname").val() =="" || $("#lastname").val() == ""){
- return true;
- }else{
- return false;
- }
- }
-</pre>
-
-
-<h3>Validation in overflown div and lightbox with scrollable content</h3>
-
-To get the supported mode you need to add these options when instancing your plugin:
-<pre lang="html">
-$("#formID").validationEngine({
- containerOverflow:true, // Enable Overflown mode
- containerOverflowDOM:"#divOverflown" // The actual DOM element container with overflow scroll on it
-})
-</pre>
-
-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<strong> wrap the input in a div being position relative</strong>, and <strong>exactly wrapping the input width and height</strong>. The easiest way to do that is by <strong>adding float:left</strong>, 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 in scollable 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.
-
-
-<h3>I want to validate directly from javascript</h3>
-You can call a validation like this: <strong>$.validationEngine.loadValidation("#date")</strong>
-
-<strong>Open and close prompts on everything</strong>
-Use my prompt on everything you want like a div element. You can call a prompt this way: $.validationEngine.buildPrompt(#ID,promptMessage,type)
-ex: <strong>$.validationEngine.buildPrompt("#date","This field is required","error")</strong>
-
-Close prompt for field ID: <strong>$.validationEngine.closePrompt("#date")</strong>
-Close prompt anything else: <strong>$.validationEngine.closePrompt(".allmydiv",true)</strong> true means look outside the form
-There are 3 type : error (red), pass (green), loading (black)
-
-<strong>Stop inline validation for 1 field</strong>
-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 : <strong> $.validationEngine.intercept = true;</strong>
-
-<h3>Inline AJAX validation</h3>
-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:
-<pre>
-"ajaxUser":{
-"file":"validateUser.php",
-"alertText":"* This user is already taken",
-"alertTextOk":"* This user is available",
-"alertTextLoad":"* Loading please wait"},
-</pre>
-
-The <strong>"file":</strong> 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.
-
-In your php, if the form validate, the variable <strong>$isValidate</strong> 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 :
-
-<pre lang="html">
-$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
-</pre>
-
-<strong>AJAX Success and failure call to actions</strong>
-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:
-<pre lang="html">
-// replace "success: false," by: success : function() { callSuccessFunction() },
-
-$("#formID").validationEngine({
-success : function(formData) { callSuccessFunction() },
-failure : function() { callFailFunction() }
-})
-</pre>
-
-<strong>The success function first parameter is your serialized form data that you can send directly to your server.</strong>
-
-<h3>Debug Mode</h3>
-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.
-
-Debug is off by default
-<pre lang="html">
-$("#formID").validationEngine({
-openDebug: true
-})
-</pre>
-
-<br clear="all" />
-
-<strong>STABLE with jQuery 1.4.3</strong>
-
-<p class="clearfix"><a class="download" target="_blank" href="http://github.com/posabsolute/jQuery-Validation-Engine">Download the source code</a> <a class="demo" href="http://www.position-relative.net/creation/formValidator/" target="_blank">View demo</a></p>
-
-<strong>Tested on:</strong>
-Internet Exploder 6 & 7
-Firefox 3+
-Safari 4
-Chrome 1+
-
-Download the older version, <strong>STABLE with jQuery 1.3.2</strong> <a href="http://www.position-relative.net/creation/formValidator/formValidator1.6.2.zip">1.6.2</a>
-
-
-
-<br clear="all" />
-If you like and use this script, please consider buying me a beer, it's cheap and a simple way to give back!
-
-<form style="text-align:left;" action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input name="cmd" type="hidden" value="_s-xclick" />
-<input name="encrypted" type="hidden" value="-----BEGIN PKCS7-----MIIHPwYJKoZIhvcNAQcEoIIHMDCCBywCAQExggEwMIIBLAIBADCBlDCBjjELMAkGA1UEBhMCVVMxCzAJBgNVBAgTAkNBMRYwFAYDVQQHEw1Nb3VudGFpbiBWaWV3MRQwEgYDVQQKEwtQYXlQYWwgSW5jLjETMBEGA1UECxQKbGl2ZV9jZXJ0czERMA8GA1UEAxQIbGl2ZV9hcGkxHDAaBgkqhkiG9w0BCQEWDXJlQHBheXBhbC5jb20CAQAwDQYJKoZIhvcNAQEBBQAEgYAOdu4WNrk77t0IKWlUdwltqhzoq0YOqjQIilD9vSF03UxGXVGN70nFUFLvZaF43e3SA8wKKwUNCViLFhpDP85phRJ9zt1UBLkd7ifNEAvm+uxO61CGq4Bp0EAJyglOa9zjrfAdj/mstlEjjVF5PMO2tUveAvivtyFGluUzo+kxPTELMAkGBSsOAwIaBQAwgbwGCSqGSIb3DQEHATAUBggqhkiG9w0DBwQIgeYRU6MTTgSAgZjTqePHNY/lHq2BouJbOXPcBG/RgIkpqK+KmSWc2rZE5mNhsmQuUaZC8VTSNpGBr2q1Wukg2QmtdwAUBYAQO3p88az0d7rTYNtNL+UxizqlYywGobUsLsfdUqYBiwFi30n25LHMAKPBhal0xA3ADzffnh/lPXu07LIWb2EF2l4NgyBNkC8cCFMUc523LZiMyRzXX7Pe9gC5iqCCA4cwggODMIIC7KADAgECAgEAMA0GCSqGSIb3DQEBBQUAMIGOMQswCQYDVQQGEwJVUzELMAkGA1UECBMCQ0ExFjAUBgNVBAcTDU1vdW50YWluIFZpZXcxFDASBgNVBAoTC1BheVBhbCBJbmMuMRMwEQYDVQQLFApsaXZlX2NlcnRzMREwDwYDVQQDFAhsaXZlX2FwaTEcMBoGCSqGSIb3DQEJARYNcmVAcGF5cGFsLmNvbTAeFw0wNDAyMTMxMDEzMTVaFw0zNTAyMTMxMDEzMTVaMIGOMQswCQYDVQQGEwJVUzELMAkGA1UECBMCQ0ExFjAUBgNVBAcTDU1vdW50YWluIFZpZXcxFDASBgNVBAoTC1BheVBhbCBJbmMuMRMwEQYDVQQLFApsaXZlX2NlcnRzMREwDwYDVQQDFAhsaXZlX2FwaTEcMBoGCSqGSIb3DQEJARYNcmVAcGF5cGFsLmNvbTCBnzANBgkqhkiG9w0BAQEFAAOBjQAwgYkCgYEAwUdO3fxEzEtcnI7ZKZL412XvZPugoni7i7D7prCe0AtaHTc97CYgm7NsAtJyxNLixmhLV8pyIEaiHXWAh8fPKW+R017+EmXrr9EaquPmsVvTywAAE1PMNOKqo2kl4Gxiz9zZqIajOm1fZGWcGS0f5JQ2kBqNbvbg2/Za+GJ/qwUCAwEAAaOB7jCB6zAdBgNVHQ4EFgQUlp98u8ZvF71ZP1LXChvsENZklGswgbsGA1UdIwSBszCBsIAUlp98u8ZvF71ZP1LXChvsENZklGuhgZSkgZEwgY4xCzAJBgNVBAYTAlVTMQswCQYDVQQIEwJDQTEWMBQGA1UEBxMNTW91bnRhaW4gVmlldzEUMBIGA1UEChMLUGF5UGFsIEluYy4xEzARBgNVBAsUCmxpdmVfY2VydHMxETAPBgNVBAMUCGxpdmVfYXBpMRwwGgYJKoZIhvcNAQkBFg1yZUBwYXlwYWwuY29tggEAMAwGA1UdEwQFMAMBAf8wDQYJKoZIhvcNAQEFBQADgYEAgV86VpqAWuXvX6Oro4qJ1tYVIT5DgWpE692Ag422H7yRIr/9j/iKG4Thia/Oflx4TdL+IFJBAyPK9v6zZNZtBgPBynXb048hsP16l2vi0k5Q2JKiPDsEfBhGI+HnxLXEaUWAcVfCsQFvd2A1sxRr67ip5y2wwBelUecP3AjJ+YcxggGaMIIBlgIBATCBlDCBjjELMAkGA1UEBhMCVVMxCzAJBgNVBAgTAkNBMRYwFAYDVQQHEw1Nb3VudGFpbiBWaWV3MRQwEgYDVQQKEwtQYXlQYWwgSW5jLjETMBEGA1UECxQKbGl2ZV9jZXJ0czERMA8GA1UEAxQIbGl2ZV9hcGkxHDAaBgkqhkiG9w0BCQEWDXJlQHBheXBhbC5jb20CAQAwCQYFKw4DAhoFAKBdMBgGCSqGSIb3DQEJAzELBgkqhkiG9w0BBwEwHAYJKoZIhvcNAQkFMQ8XDTA5MDUxNjIwMTk0MVowIwYJKoZIhvcNAQkEMRYEFE1aC6wFd3AixYBkvU1X4DEF1thhMA0GCSqGSIb3DQEBAQUABIGAvcW+5i8RrZ6jePXK2hHKk975YGkTqQBMvlvpum8u5PCXmclJMpggMCYu232EerU/8kE7RT+G0GR4VMu7wyej32yThLNyo+eZ9WVWq51biDuDTZlfzQkDT5kg0/8JeClhVS1E+jdRPeCTXXZLbn9w3U8NPZKaYHXbCZslD9v3d6k=-----END PKCS7-----" />
-<input style="align:left" alt="PayPal - The safer, easier way to pay online!" name="submit" src="http://www.position-absolute.com/wp-content/themes/default/images/bg_buy.jpg" type="image" />
-<img src="https://www.paypal.com/en_US/i/scr/pixel.gif" border="0" alt="" width="1" height="1" />
-</form>
-
-
-
-
-
-
-<div class="ads">
-<strong>Ads</strong><p>Become expert in web development with <a href="http://www.test-king.com">testking</a> using self paced <a href="http://www.test-king.com/exams/HP0-D07.htm">testking HP0-D07</a> study guides and <a href="http://www.test-king.com/exams/646-671.htm">testking 646-671</a> jQuery tutorials.</p>
-</div>
-
-</body>
-</html>
View
536 README.md
@@ -0,0 +1,536 @@
+jQuery.validationEngine v2.0
+=====
+
+Summary
+---
+
+jQuery validation engine is a Javascript plugin aiming the validation of form fields in the browser (IE 6-8, Chrome, Firefox, Safari, Opera 10).
+The plugin provides visual appealing prompts that grab user attention on the subject matter.
+
+Validations range from email, phone, url to more complex calls such as ajax processing.
+Bundled in several locales, the error prompts can be translated in the locale of your choice.
+
+![Screenshot](https://github.com/orefalo/jQuery-Validation-Engine/raw/master/css/screenshot.png)
+
+**Important**: v2 is a significant rewrite of the original 1.7 branch. Please read the documentation as the API has changed!
+
+Installation
+---
+
+### What's in the archive?
+
+The archive holds of course the core library along with translations in different languages.
+It also comes with a set of demo pages and a simple ajax server (built in Java).
+
+1. Unpack the archive
+2. Include the script jquery.validationEngine.closure.js in your page
+3. Pick the locale of the choice, include it in your page: jquery.validationEngine-XX.js
+4. **Read this manual** and understand the API
+
+
+### Running the Demos
+
+Most demos are functional by opening their respective HTML file. However, the Ajax demos require the use of Java6 to launch a lightweight http server.
+
+1. Run the script `runDemo.bat` (Windows) or `runDemo.sh` (Unix) from the folder
+2. Open a browser pointing at [http://localhost:9173](http://localhost:9173)
+
+Demos
+---
+
+TODO
+
+
+Usage
+---
+
+### References
+
+First link jQuery to the page
+
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js" type="text/javascript"></script>
+
+Attach *jquery.validationEngine* and its locale
+
+ <script src="js/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
+ <script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
+
+Finally link the desired theme
+
+ <link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>
+
+
+### Field validations
+
+Validations are defined using the field's **class** attribute. Here are a few examples showing how it happens:
+
+ <input value="someone@nowhere.com" class="validate[required,custom[email]]" type="text" name="email" id="email" />
+ <input value="2010-12-01" class="validate[required,custom[date]]" type="text" name="date" id="date" />
+ <input value="too many spaces obviously" class="validate[required,custom[onlyLetterNumber]]" type="text" name="special" id="special" />
+
+For more details about validators, please refer to the section below.
+
+### Instantiation
+
+The validator is typically instantiated by using a call of the following forms:
+
+ $("#form.id").validationEngine();
+
+Without any parameters, the init() and attach() methods are automatically called.
+
+ $("#form.id").validationEngine(action or options);
+
+The method may take one or several parameters, either an action (and parameters) or a list of options to customize the behavior of the engine.
+
+Here comes a glimpse: say you have a form as such:
+
+ <form id="formID" method="post" action="submit.action">
+ <input value="2010-12-01" class="validate[required,custom[date]]" type="text" name="date" id="date" />
+ </form>
+
+The code below will instance the validation engine and attach it to the form:
+ <script>
+ $(document).ready(function(){
+ $("#formID").validationEngine();
+ });
+ </script>
+
+But the following will only initialize, attachment needs to be done manually.
+
+ <script>
+ $(document).ready(function(){
+ $("#formID").validationEngine({promptPosition : "centerRight", scroll: false});
+ $("#formID").validationEngine('attach');
+ });
+ </script>
+
+
+Actions
+---
+
+### init
+
+Initializes the engine with default settings
+
+ $("#formID1").validationEngine({promptPosition : "centerRight", scroll: false});
+ $("#formID1").validationEngine('init', {promptPosition : "centerRight", scroll: false});
+
+### attach
+
+Attaches jQuery.validationEngine to form.submit and field.blur events.
+
+ $("#formID1").validationEngine('attach');
+
+### detach
+
+Unregisters any bindings that may point to jQuery.validaitonEngine.
+
+ $("#formID1").validationEngine('detach');
+
+### validate
+
+Validates the form and displays prompts accordingly.
+Returns *true* if the form validates, *false* if it contains errors. Note that if you use an ajax form validator, the actual result will be delivered asynchronously to the function *options.onAjaxFormComplete*.
+
+ alert( $("#formID1").validationEngine('validate') );
+
+### validate one field
+
+Validates one field and displays the prompt accordingly.
+Returns *false* if the input validates, *true* if it contains errors.
+
+ alert( $("#formID1").validationEngine('validateField', "#emailInput") );
+
+### showPrompt (promptText, type, promptPosition, showArrow)
+
+Displays a prompt on a given element. Note that the prompt can be displayed on any element an id.
+
+The method takes four parameters:
+1. the text of the prompt itself
+2. a type which defines the visual look of the prompt: 'pass' (green), 'load' (black) anything else (red)
+3. an optional position: either "topLeft", "topRight", "bottomLeft", "centerRight", "bottomRight". Defaults to *"topRight"*
+4. an optional boolean which tells if the prompt should display a directional arrow
+
+ <fieldset>
+ <legend id="legendid">Email</legend>
+ <a href="#" onclick="$('#legendid').validationEngine('showPrompt', 'This a custom msg', 'load')">Show prompt</a>
+ </fieldset>
+
+### hide
+
+Closes error prompts in the current form (in case you have more than one form on the page)
+
+ $('#formID1').validationEngine('hide')">Hide prompts
+
+### hideAll
+
+Closes **all** error prompts on the page.
+
+ $('#formID1').validationEngine('hideAll');
+
+Options
+---
+
+Options are typically passed to the init action as a parameter.
+ $("#formID1").validationEngine({promptPosition : "centerRight", scroll: false});
+
+### validationEventTrigger
+Name of the event triggering field validation, defaults to *blur*.
+
+### scroll
+Tells if we should scroll the page to the first error, defaults to *true*.
+
+### promptPosition
+Where should the prompt show ? Possible values are "topLeft", "topRight", "bottomLeft", "centerRight", "bottomRight". Defaults to *"topRight"*.
+
+### ajaxFormValidation
+If set to true, turns Ajax form validation logic on. defaults to *false*.
+form validation takes place when the validate() action is called or when the form is submitted.
+
+### onBeforeAjaxFormValidation(form, options)
+When ajaxFormValidation is turned on, function called before the asynchronous AJAX form validation call. May return false to stop the Ajax form validation
+
+### onAjaxFormComplete: function(form, status, errors, options)
+When ajaxFormValidation is turned on, function is used to asynchronously process the result of the validation.
+
+### isOverflown
+Set to true when the form shows in a scrolling div, defaults to *false*.
+
+### overflownDIV
+Selector used to pick the overflown container, defaults to *""*.
+
+### onValidationComplete
+Stop the form from submitting, and let you handle it after it validated via a function
+
+### bindMethod (defaut: bind)
+By default the engine bind the form and the field with bind. If you need a persistant you can also use 'live'
+
+Validators
+---
+
+Validators are encoded in the field's class attribute, as such
+
+### required
+
+Speaks by itself, fails if the element has no value. this validator can apply to pretty much any kind of input field.
+
+ <input value="" class="validate[required]" type="text" name="email" id="email" />
+ <input class="validate[required]" type="checkbox" id="agree" name="agree"/>
+
+ <select name="sport" id="sport" class="validate[required]" id="sport">
+ <option value="">Choose a sport</option>
+ <option value="option1">Tennis</option>
+ <option value="option2">Football</option>
+ <option value="option3">Golf</option>
+ </select>
+
+### custom[regex_name]
+
+Validates the element's value to a predefined list of regular expressions.
+
+ <input value="someone@nowhere.com" class="validate[required,custom[email]]" type="text" name="email" id="email" />
+
+Please refer to the section Custom Regex for a list of available regular expressions.
+
+### function[methodName]
+
+Validates a field using a third party function call. If a validation error occurs, the function must return an error message that will automatically show in the error prompt.
+
+ function checkHELLO(field, rules, i, options){
+ if (field.val() != "HELLO") {
+ // this allows the use of i18 for the error msgs
+ return options.allrules.validate2fields.alertText;
+ }
+ }
+
+The following declaration will do
+ <input value="" class="validate[required,funcCall[checkHELLO]]" type="text" id="lastname" name="lastname" />
+
+### ajax[selector]
+
+Delegates the validation to a server URL using an asynchronous Ajax request. The selector is used to identify a block of properties in the translation file, take the following example.
+
+ <input value="" class="validate[required,custom[onlyLetterNumber],maxSize[20],ajax[ajaxUserCall]] text-input" type="text" name="user" id="user" />
+
+
+ "ajaxUserCall": {
+ "url": "ajaxValidateFieldUser",
+ "extraData": "name=eric",
+ "alertText": "* This user is already taken",
+ "alertTextOk": "All good!",
+ "alertTextLoad": "* Validating, please wait"
+ },
+
+* url - is the remote restful service to call
+* extraData - optional parameters to sent
+* alertText - error prompt message is validation fails
+* alertTextOk - optional prompt is validation succeeds (shows green)
+* alertTextLoad - message displayed while the validation is being performed
+
+This validator is explained in further details in the Ajax section.
+
+### equals[field.id]
+
+Check if the current field's value equals the value of the specified field.
+
+### min[float]
+
+Validates when the field's value if less or equal to the given parameter.
+
+### max[float]
+
+Validates when the field's value if more or equal to the given parameter.
+
+### minSize[integer]
+
+Validates if the element content size (in characters) is more or equal to the given *integer*. integer <= input.value.length
+
+### maxSize[integer]
+
+Validates if the element content size (in characters) is less or equal to the given *integer*. input.value.length <= integer
+
+### past[NOW or a date]
+
+Checks if the element's value (which is implicitly a date) is earlier than the given *date*. When "NOW" is used as a parameter, the date will be calculate in the browser. Note that this may be different that the server date. Dates use the ISO format YYYY-MM-DD
+
+ <input value="" class="validate[required,custom[date],past[now]]" type="text" id="birthdate" name="birthdate" />
+ <input value="" class="validate[required,custom[date],past[2010-01-01]]" type="text" id="appointment" name="appointment" />
+
+### future[NOW or a date]
+
+Checks if the element's value (which is implicitly a date) is greater than the given *date*. When "NOW" is used as a parameter, the date will be calculate in the browser. Note that this may be different that the server date. Dates use the ISO format YYYY-MM-DD
+
+ <input value="" class="validate[required,custom[date],future[now]]" type="text" id="appointment" name="appointment" />
+ // a date in 2009
+ <input value="" class="validate[required,custom[date],future[2009-01-01],past[2009-12-31]]" type="text" id="d1" name="d1" />
+
+
+### minCheckbox[integer]
+
+Validates when a minimum of *integer* checkboxes are selected.
+The validator uses a special naming convention to identify the checkboxes part of the group.
+
+The following example, enforces a minimum of two selected checkboxes
+ <input class="validate[minCheckbox[2]]" type="checkbox" name="group1" id="maxcheck1" value="5"/>
+ <input class="validate[minCheckbox[2]]" type="checkbox" name="group1" id="maxcheck2" value="3"/>
+ <input class="validate[minCheckbox[2]]" type="checkbox" name="group1" id="maxcheck3" value="9"/>
+
+Note how the input.name is identical across the fields.
+
+### maxCheckbox[integer]
+
+Same as above but limits the maximum number of selected check boxes.
+
+Selectors
+---
+
+We've introduced the notion of selectors without giving much details about them: A selector is a string which is used as a key to match properties in the translation files.
+Take the following example:
+
+ "onlyNumber": {
+ "regex": /^[0-9\ ]+$/,
+ "alertText": "* Numbers only"
+ },
+ "ajaxUserCall": {
+ "url": "ajaxValidateFieldUser",
+ "extraData": "name=eric",
+ "alertText": "* This user is already taken",
+ "alertTextLoad": "* Validating, please wait"
+ },
+ "validate2fields": {
+ "alertText": "* Please input HELLO"
+ }
+
+
+onlyNumber, onlyLetter and validate2fields are all selectors. jQuery.validationEngine comes with a standard set but you are welcome to add you own to define AJAX backend services, error messages and/or new regular expressions.
+
+Ajax
+---
+
+Ajax validation comes in two flavors:
+
+1. Field Ajax validations, which takes place when the user inputs a value in a field and moves away.
+2. Form Ajax validation, which takes place when the form is submitted or when the validate() action is called.
+
+Both options are optional.
+
+### Field ajax validation
+
+
+####Protocol
+
+The client sends the fieldId and the fieldValue as a GET request to the server url.
+
+ Client calls url?fieldId=id1&fieldValue=value1 ==> Server
+
+Server responds with **one** tuple: field1, status: either true (validation succeeded) or false.
+
+ Client receives <== ["id1", boolean] Server
+
+
+### Form ajax validation
+
+
+####Protocol
+
+The client sends the form fields and values as a GET request to the form.action url.
+
+ Client calls url?fieldId=id1&fieldValue=value1&...etc ==> Server (form.action)
+
+Server responds with a list of arrays: [fieldid, status, errorMsg].
+
+* fieldid is the name (id) of the field
+* status is the result of the validation, true if it passes, false if it fails
+* errorMsg is an error string (or a selector) to the prompt text
+
+ Client receives <== [["id1", boolean,"errorMsg"],["id2", false, "there is an error "],["id3", true, "this field is good"]] Server
+
+Note that only errors (status=false) shall be returned from the server. However you may also decide to return an entry with a status=true in which case the errorMsg will show as a green prompt.
+
+
+####Callbacks
+
+Since the form validation is asynchronously delegated to the form action, we provide two callback methods:
+
+**onBeforeAjaxFormValidation(form, options)** is called before the ajax form validation call, it may return false to stop the request
+
+**onAjaxFormComplete: function(form, status, json_response_from_server, options)** is called after the ajax form validation call
+
+Custom Regex
+---
+
+jQuery.validationEngine comes with a lot of predefined expressions. Regex are specified as such:
+
+ <input value="" class="validate[custom[email]]" type="text" name="email" id="email" />
+
+Note that the selector identifies a given regular expression in the translation file, but also its associated error prompt messages and optional green prompt message.
+
+### phone
+
+a typical phone number with an optional country code and extension. Note that the validation is **relaxed**, please add extra validations for your specific country.
+
+ 49-4312 / 777 777
+ +1 (305) 613-0958 x101
+ (305) 613 09 58 ext 101
+ 3056130958
+ +33 1 47 37 62 24 extension 3
+ (016977) 1234
+ 04312 - 777 777
+ 91-12345-12345
+ +58 295416 7216
+
+### url
+
+matched a url such as http://myserver.com, https://www.crionics.com or ftp://myserver.ws
+
+### email
+
+easy, an email : username@hostname.com
+
+### date
+
+an ISO date, YYYY-MM-DD
+
+### number
+
+floating points with an optional sign. ie. -143.22 or .77 but also +234,23
+
+### integer
+
+integers with an optional sign. ie. -635 +2201 738
+
+### ipv4
+
+an IP address (v4) ie. 127.0.0.1
+
+### onlyNumberSp
+
+Only numbers and spaces characters
+
+### onlyLetterSp
+
+Only letters and space characters
+
+### onlyLetterNumber
+
+Only letters and numbers, no space
+
+
+Overflow
+---
+
+Validation in overflown div and lightbox with scrollable content
+
+To get the supported mode you need to add these options when instancing your plugin:
+
+ $("#formID").validationEngine({
+ isOverflown: true,
+ overflownDIV: ".inputContainer"
+ })
+
+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 in scollable 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.
+
+Customizations
+---
+
+What would be a good library without customization ?
+
+### Adding regular expressions
+
+Adding new regular expressions is easy: open your translation file and add a new entry to the list
+
+ "onlyLetter": {
+ "regex": /^[a-zA-Z\ \']+$/,
+ "alertText": "* Letters only"
+ },
+
+* "onlyLetter" is a sample selector name
+* "regex" is a javascript regular expression
+* "alertText" is the message to display when the validation fails
+
+You can now use the new regular expression as such
+
+ <input type="text" id="myid" name="myid" class="validation[custom[onlyLetter]]"/>
+
+Don't forget to contribute!
+
+### Customizing the look and feel
+
+Edit the file *validationEngine.jquery.css* and customize the stylesheet to your likings. it's trivial if you know CSS.
+
+### Adding more locales
+
+You can easy add a locale by taking *jquery.validationEngine-en.js* as an example.
+Feel free to share the translation ;-)
+
+Rules of thumb
+---
+
+* field.id are **unique** across the page
+* for simplicity and consistency field.id and field.name should match (except with minCheckbox and maxCheckbox validators)
+* spaces or special chars should be avoided in field.id or field.name
+* use lower cases for input.type ie. *text, password, textarea, checkbox, radio*
+* use the Ajax validator last ie. validate[custom[onlyLetter],length[0,100],**ajax[ajaxNameCall]**]
+* use only one Ajax validator per field!
+* JSON services should live on the same server (or you will get into browser security issues)
+* in a perfect RESTful world, http **GET** is used to *READ* data, http **POST** is used to *WRITE* data: which translates into -> Ajax validations should use GET, the actual form post should use a POST request.
+
+Contribution
+---
+Contributions are always welcome, you may refer to the latest stable project at [GitHub](https://github.com/posabsolute/jQuery-Validation-Engine)
+We use [Aptana](http://www.aptana.com/) as a Javascript editor and the Rockstart JSLint & Closure plugins http://update.rockstarapps.com/site.xml
+
+
+License
+---
+Licensed under the MIT License
+
+
+Authors
+---
+
+ Copyright(c) 2011 [Cedric Dugas](https://github.com/posabsolute) [http://www.position-absolute.com](http://www.position-absolute.com)
+
+ v2.0 Rewrite by [Olivier Refalo](https://github.com/orefalo) [http://www.crionics.com](http://www.crionics.com)
View
24 TODO.txt
@@ -0,0 +1,24 @@
+TODO: Find someone to work on the Italian translation
+IDEA: hook browser resize -> reposition prompts
+IMPROVE: think about aborting ajax field requests when form.submit happens $.ajax().abort();
+
+FIXED: Arrow positioning not working for other positioning cases
+FIXED: multiple forms demo: positionning issue, weird pixel gaps
+DONE: Work on demo field types -> add more fields types like textarea..etc
+DONE: work on translations, other languages should b out of sync at this point
+DONE: Test on IE, Opera, FF, Chrome and Safari
+DONE: write documentation
+MAYBE NOT: split the translation files - they hold data for the demos
+DONE: form ajax : use the url from form.action -> it makes more sense
+DONE: implement Play validators
+DONE: remove length[] validator
+FIXED: Implement ajax submit
+DONE: pass showArrow boolean as parameter of showPrompt
+ABANDONED: rename customer rule to regex
+FIXED: Overflown positioning is screwed up
+DONE: Provide a minimized version
+FIXED: field ajax validation works
+FIXED: checkbox groups were not working
+FIXED: field hook doesn't work
+NOT A GOOD IDEA: use a stack for validation parsing
+DONE: build demo pages -> IN PROGRESS
View
34 ajaxSubmit.php
@@ -1,34 +0,0 @@
-<?php
-
-/* RECEIVE POST */
-$email=$_POST['email'];
-$age=$_POST['age'];
-
-/* VALIDATE HOW YOU NEED TO VALIDATE */
-
-
-
-
-/* RETURN ERROR */
-
-$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
-
-$arrayError[1][0] = "#age"; // FIELD
-$arrayError[1][1] = "Your email do not match.. whatever it need to match"; // TEXT ERROR
-$arrayError[1][2] = "error"; // BOX COLOR
-
-
-
-$isValidate = true; // RETURN TRUE FROM VALIDATING, NO ERROR DETECTED
-/* RETTURN ARRAY FROM YOUR VALIDATION */
-
-
-/* THIS NEED TO BE IN YOUR FILE NO MATTERS WHAT */
-if($isValidate == true){
- echo "true";
-}else{
- echo '{"jsonValidateReturn":'.json_encode($arrayError).'}'; // RETURN ARRAY WITH ERROR
-}
-?>
View
BIN css/screenshot.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
32 css/template.css
@@ -1,20 +1,20 @@
-body{ background:#ececec;}
+body {
+ background: #ececec;
+}
form.formular {
font-family: tahoma, verdana, "sans-serif";
font-size: 12px;
padding: 20px;
border: 1px solid #A5A8B8;
-
- width:300px;
- margin-left:300px;
+ width: 300px;
+ margin: 0 auto;
}
.formular fieldset {
margin-top: 20px;
- padding : 15px;
+ padding: 15px;
border: 1px solid #B5B8C8;
-
}
.formular legend {
@@ -33,8 +33,8 @@ form.formular {
color: #000;
}
-.formular input, .formular select, .formular textarea {
- display : block;
+.formular input,.formular select,.formular textarea {
+ display: block;
margin-bottom: 5px;
}
@@ -45,20 +45,20 @@ form.formular {
border: 1px solid #B5B8C8;
font-size: 14px;
margin-top: 4px;
- background: #FFF url('/img/form/text-bg.gif') repeat-x;
-
+ background: #FFF repeat-x;
}
+
.formular textarea {
width: 250px;
- height:70px;
+ height: 70px;
color: #555;
padding: 4px;
border: 1px solid #B5B8C8;
font-size: 14px;
margin-top: 4px;
- background: #FFF url('/img/form/text-bg.gif') repeat-x;
-
+ background: #FFF repeat-x;
}
+
.formular .infos {
background: #FFF;
color: #333;
@@ -67,18 +67,18 @@ form.formular {
margin-bottom: 10px;
}
-.formular span.checkbox, .formular .checkbox {
+.formular span.checkbox,.formular .checkbox {
display: inline;
}
.formular .submit {
- background: url('/img/form/button-bg.png') repeat-x;
+
border: 1px solid #AAA;
padding: 4px;
margin-top: 20px;
float: right;
text-decoration: none;
- cursor:pointer;
+ cursor: pointer;
}
.formular hr {
View
223 css/validationEngine.jquery.css
@@ -1,81 +1,142 @@
-
- .inputContainer{position:relative; float:left;}
- .formError {
- position:absolute;
- top:300px; left:300px;
- display:block;
- z-index:5000;
- cursor:pointer;
- }
- #debugMode{
- background:#000;
- position:fixed;
- width:100%; height:200px;
- top:0; left:0;
- overflow:scroll;
- opacity:0.8;
- display:block;
- padding:10px;
- color:#fff;
- font-size:14px;
- z-index:100000;
- }
-
- .ajaxSubmit{ padding:20px; background:#55ea55;border:1px solid #999;display:none}
- .formError .formErrorContent {
- width:100%;
- background:#ee0101;
- color:#fff;
- width:150px;
- font-family:tahoma;
- font-size:11px;
- border:2px solid #ddd;
- box-shadow: 0px 0px 6px #000;
- -moz-box-shadow: 0px 0px 6px #000;
- -webkit-box-shadow: 0px 0px 6px #000;
- padding:4px 10px 4px 10px;
- border-radius: 6px;
- -moz-border-radius: 6px;
- -webkit-border-radius: 6px;
- }
- .greenPopup .formErrorContent {background:#33be40;}
-
- .blackPopup .formErrorContent {background:#393939;color:#FFF;}
-
- .formError .formErrorArrow{
- width:15px;
- margin:-2px 0 0 13px;
- z-index:5001;
- }
- .formError .formErrorArrowBottom{top:0;margin:-6px;}
-
- .formError .formErrorArrow div{
- border-left:2px solid #ddd;
- border-right:2px solid #ddd;
- box-shadow: 0px 2px 3px #444;
- -moz-box-shadow: 0px 2px 3px #444;
- -webkit-box-shadow: 0px 2px 3px #444;
- font-size:0px; height:1px; background:#ee0101;margin:0 auto;line-height:0px; font-size:0px; display:block;
- }
- .formError .formErrorArrowBottom div{
- box-shadow: none;
- -moz-box-shadow: none;
- -webkit-box-shadow: none;
- }
-
- .greenPopup .formErrorArrow div{background:#33be40;}
- .blackPopup .formErrorArrow div{background:#393939;color:#FFF;}
-
- .formError .formErrorArrow .line10{width:15px;border:none;}
- .formError .formErrorArrow .line9{width:13px;border:none;}
- .formError .formErrorArrow .line8{width:11px;}
- .formError .formErrorArrow .line7{width:9px;}
- .formError .formErrorArrow .line6{width:7px;}
- .formError .formErrorArrow .line5{width:5px;}
- .formError .formErrorArrow .line4{width:3px;}
- .formError .formErrorArrow .line3{width:1px;
- border-left:2px solid #ddd;
- border-right:2px solid #ddd;
- border-bottom:0px solid #ddd;}
- .formError .formErrorArrow .line2{width:3px;border:none;background:#ddd;}
- .formError .formErrorArrow .line1{width:1px;border:none;background:#ddd;}
+.inputContainer {
+ position: relative;
+ float: left;
+}
+
+.formError {
+ position: absolute;
+ top: 300px;
+ left: 300px;
+ display: block;
+ z-index: 5000;
+ cursor: pointer;
+}
+
+.ajaxSubmit {
+ padding: 20px;
+ background: #55ea55;
+ border: 1px solid #999;
+ display: none
+}
+
+.formError .formErrorContent {
+ width: 100%;
+ background: #ee0101;
+ position:relative;
+ z-index:5001;
+ color: #fff;
+ width: 150px;
+ font-family: tahoma;
+ font-size: 11px;
+ border: 2px solid #ddd;
+ box-shadow: 0 0 6px #000;
+ -moz-box-shadow: 0 0 6px #000;
+ -webkit-box-shadow: 0 0 6px #000;
+ padding: 4px 10px 4px 10px;
+ border-radius: 6px;
+ -moz-border-radius: 6px;
+ -webkit-border-radius: 6px;
+}
+
+.greenPopup .formErrorContent {
+ background: #33be40;
+}
+
+.blackPopup .formErrorContent {
+ background: #393939;
+ color: #FFF;
+}
+
+.formError .formErrorArrow {
+ width: 15px;
+ margin: -2px 0 0 13px;
+ position:relative;
+ z-index: 5006;
+}
+
+.formError .formErrorArrowBottom {
+ box-shadow: none;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ margin: 0px 0 0 12px;
+ top:2px;
+}
+
+.formError .formErrorArrow div {
+ border-left: 2px solid #ddd;
+ border-right: 2px solid #ddd;
+ box-shadow: 0 2px 3px #444;
+ -moz-box-shadow: 0 2px 3px #444;
+ -webkit-box-shadow: 0 2px 3px #444;
+ font-size: 0px;
+ height: 1px;
+ background: #ee0101;
+ margin: 0 auto;
+ line-height: 0;
+ font-size: 0;
+ display: block;
+}
+
+.formError .formErrorArrowBottom div {
+ box-shadow: none;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+}
+
+.greenPopup .formErrorArrow div {
+ background: #33be40;
+}
+
+.blackPopup .formErrorArrow div {
+ background: #393939;
+ color: #FFF;
+}
+
+.formError .formErrorArrow .line10 {
+ width: 15px;
+ border: none;
+}
+
+.formError .formErrorArrow .line9 {
+ width: 13px;
+ border: none;
+}
+
+.formError .formErrorArrow .line8 {
+ width: 11px;
+}
+
+.formError .formErrorArrow .line7 {
+ width: 9px;
+}
+
+.formError .formErrorArrow .line6 {
+ width: 7px;
+}
+
+.formError .formErrorArrow .line5 {
+ width: 5px;
+}
+
+.formError .formErrorArrow .line4 {
+ width: 3px;
+}
+
+.formError .formErrorArrow .line3 {
+ width: 1px;
+ border-left: 2px solid #ddd;
+ border-right: 2px solid #ddd;
+ border-bottom: 0 solid #ddd;
+}
+
+.formError .formErrorArrow .line2 {
+ width: 3px;
+ border: none;
+ background: #ddd;
+}
+
+.formError .formErrorArrow .line1 {
+ width: 1px;
+ border: none;
+ background: #ddd;
+}
View
94 demoAjax.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html>
+ <head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+ <title>JQuery Validation Engine</title>
+ <link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>
+ <link rel="stylesheet" href="css/template.css" type="text/css"/>
+ <script src="js/jquery-1.4.4.min.js" type="text/javascript">
+ </script>
+ <script src="js/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8">
+ </script>
+ <script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8">
+ </script>
+ <script>
+
+ // This method is called right before the ajax form validation request
+ // it is typically used to setup some visuals ("Please wait...");
+ // you may return a false to stop the request
+ function beforeCall(form, options){
+ if (console)
+ console.log("Right before the AJAX form validation call");
+ return true;
+ }
+
+ // Called once the server replies to the aja form validation request
+ function ajaxValidationCallback(status, form, json, options){
+ if (console)
+ console.log(status);
+
+ if (status === true) {
+ alert("the form is valid!");
+ // uncomment these lines to submit the form to form.action
+ // form.validationEngine('detach');
+ // form.submit();
+ // or you may use AJAX again to submit the data
+ }
+ }
+
+ jQuery(document).ready(function(){
+ jQuery("#formID").validationEngine({
+ ajaxFormValidation: true,
+ onAjaxFormComplete: ajaxValidationCallback,
+ onBeforeAjaxFormValidation: beforeCall
+ });
+
+ jQuery("#formID").validationEngine('attach');
+ });
+ </script>
+ </head>
+ <body>
+ <p>
+ <a href="#" onclick="alert(jQuery('#formID').validationEngine({evaluate:true}))">Return true or false without binding anything</a>
+ | <a href="#" onclick="jQuery.validationEngine.buildPrompt('#formID','This is an example','error')">Build a prompt on a div</a>
+ | <a href="#" onclick="jQuery.validationEngine.loadValidation('#date')">Load validation date</a>
+ | <a href="#" onclick="jQuery.validationEngine.closePrompt('.formError',true)">Close all prompt</a>
+ </p>
+ <p>
+ This demonstrations shows the use of Ajax <b>form</b>
+ and <b>field</b>
+ validations.
+ <br/>
+ The form validation implements callback hooks, so please check the javascript console
+ </p>
+ <form id="formID" class="formular" method="post" action="ajaxSubmitForm" style="width:600px">
+ <fieldset>
+ <legend>
+ Ajax validation
+ </legend>
+ <label>
+ <span>Desired username (ajax validation, only <b>karnius</b> is available) : </span>
+ <input value="karnius" class="validate[required,custom[onlyLetterNumber],maxSize[20],ajax[ajaxUserCall]] text-input" type="text" name="user" id="user" />
+ <p>
+ validate[required,custom[noSpecialCaracters],maxSize[20],ajax[ajaxUserCall]]
+ </p>
+ </label>
+ <label>
+ <span>First name (ajax validation, only <b>duncan</b> is available): </span>
+ <input value="olivier" class="validate[custom[onlyLetter],maxSize[100],ajax[ajaxNameCall]] text-input" type="text" name="firstname" id="firstname" />
+ <p>
+ validate[custom[onlyLetter],length[0,100],ajax[ajaxNameCall]]
+ </p>
+ </label>
+ <label>
+ <span>Email address : </span>
+ <input value="someone1@here.com" class="validate[required,custom[email]] text-input" type="text" name="email" id="email" />
+ <p>
+ validate[required,custom[email]]
+ </p>
+ </label>
+ </fieldset>
+ <input class="submit" type="submit" value="Validate & Send the form!"/><hr/>
+ </form>
+ </body>
+</html>
View
78 demoCheckbox.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+ <title>JQuery Validation Engine</title>
+ <link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>
+ <link rel="stylesheet" href="css/template.css" type="text/css"/>
+ <script src="js/jquery-1.4.4.min.js" type="text/javascript">
+ </script>
+ <script src="js/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8">
+ </script>
+ <script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8">
+ </script>
+ <script>
+ jQuery(document).ready(function(){
+ // binds form submission and fields to the validation engine
+ jQuery("#formID").validationEngine();
+ });
+ </script>
+ </head>
+ <body>
+ <p>
+ <a href="#" onclick="alert('is the form valid? '+jQuery('#formID').validationEngine('validate'))">Evaluate form</a>
+ | <a href="#" onclick="jQuery('#formID').validationEngine('showPrompt', 'This is an example', 'pass')">Build a prompt on a div</a>
+ | <a href="#" onclick="jQuery('#formID').validationEngine('hide')">Close all prompts</a>
+ | <a href="index.html" onclick="">Back to index</a>
+ </p>
+ <p>
+ This demonstration shows extended features around checkboxes
+ </p>
+ <form id="formID" class="formular" method="post" action="">
+ <fieldset>
+ <legend>
+ Phone
+ </legend>
+ <div>
+ <span>Radio Groupe :
+ <br/>
+ </span>
+ <span>radio 1: </span>
+ <input class="validate[required] radio" type="radio" name="group0" id="radio1" value="5"/><span>radio 2: </span>
+ <input class="validate[required] radio" type="radio" name="group0" id="radio2" value="3"/><span>radio 3: </span>
+ <input class="validate[required] radio" type="radio" name="group0" id="radio3" value="9"/>
+ </div>
+ <div>
+ <span>Minimum 2 checkbox :
+ <br/>
+ </span>
+ <input class="validate[minCheckbox[2]] checkbox" type="checkbox" name="group1" id="maxcheck1" value="5"/>
+ <input class="validate[minCheckbox[2]] checkbox" type="checkbox" name="group1" id="maxcheck2" value="3"/>
+ <input class="validate[minCheckbox[2]] checkbox" type="checkbox" name="group1" id="maxcheck3" value="9"/>
+ </div>
+ <div>
+ <span><b>Maximum</b> 2 checkbox :
+ <br/>
+ </span>
+ <input class="validate[maxCheckbox[2]] checkbox" type="checkbox" name="group2" id="maxcheck1" value="5"/>
+ <input class="validate[maxCheckbox[2]] checkbox" type="checkbox" name="group2" id="maxcheck2" value="3"/>
+ <input class="validate[maxCheckbox[2]] checkbox" type="checkbox" name="group2" id="maxcheck3" value="9"/>
+ </div>
+
+
+ </fieldset>
+ <fieldset>
+ <legend>
+ Conditions
+ </legend>
+ <div class="infos">
+ Checking this box indicates that you accept terms of use. If you do not accept these terms, do not use this website :
+ </div>
+ <label>
+ <span class="checkbox">I accept terms of use : </span>
+ <input class="validate[required] checkbox" type="checkbox" id="agree" name="agree"/>
+ </label>
+ </fieldset><input class="submit" type="submit" value="Validate & Send the form!"/><hr/>
+ </form>
+ </body>
+</html>
View
111 demoFieldTypes.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+ <title>JQuery Validation Engine</title>
+ <link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>
+ <link rel="stylesheet" href="css/template.css" type="text/css"/>
+ <script src="js/jquery-1.4.4.min.js" type="text/javascript">
+ </script>
+ <script src="js/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8">
+ </script>
+ <script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8">
+ </script>
+ <script>
+ jQuery(document).ready( function() {
+ // binds form submission and fields to the validation engine
+ jQuery("#formID").validationEngine();
+ });
+ </script>
+ </head>
+ <body>
+ <p>
+ <a href="#" onclick="alert('is the form valid? '+jQuery('#formID').validationEngine('validate'))">Evaluate form</a>
+ | <a href="#" onclick="jQuery('#formID').validationEngine('showPrompt', 'This is an example', 'pass')">Build a prompt on a div</a>
+ | <a href="#" onclick="jQuery('#formID').validationEngine('hide')">Close all prompts</a>
+ | <a href="index.html" onclick="">Back to index</a>
+ </p>
+ <p>
+ This demonstration shows the different HTML field types we support
+ </p>
+ <form id="formID" class="formular" method="post" action="">
+ <fieldset>
+ <legend>
+ Text field
+ </legend>
+ <label>
+ URL begin with http:// https:// or fpl://
+ <br/>
+ <span>Enter a URL : </span>
+ <input value="http://" class="validate[required,custom[url]] text-input" type="text" name="url" id="url" />
+ </label>
+ </fieldset>
+ <fieldset>
+ <legend>
+ TextArea
+ </legend>
+ <label>
+ URL begin with http:// https:// or fpl://
+ <br/>
+ <span>Enter a URL : </span>
+ <textarea class="validate[required] text-input" rows="2" cols="20" name="ta" id="ta" ></textarea>
+ </label>
+ </fieldset>
+ <fieldset>
+ <legend>
+ Select single
+ </legend>
+ <label>
+ <select name="sport" id="sport" class="validate[required]">
+ <option value="">Choose a sport</option>
+ <option value="option1">Tennis</option>
+ <option value="option2">Football</option>
+ <option value="option3">Golf</option>
+ </select>
+ </label>
+ </fieldset>
+ <fieldset>
+ <legend>
+ Select mutiple
+ </legend>
+ <label>
+ <select name="sport2" id="sport2" multiple="true" class="validate[required]">
+ <option value="">Choose a sport</option>
+ <option value="option1">Tennis</option>
+ <option value="option2">Football</option>
+ <option value="option3">Golf</option>
+ </select>
+ </label>
+ </fieldset>
+ <fieldset>
+ <legend>
+ Radio
+ </legend>
+ <div>
+ <span>Radio Groupe :
+ <br/>
+ </span>
+ <span>radio 1: </span>
+ <input class="validate[required] radio" type="radio" name="group0" id="radio1" value="5"/><span>radio 2: </span>
+ <input class="validate[required] radio" type="radio" name="group0" id="radio2" value="3"/><span>radio 3: </span>
+ <input class="validate[required] radio" type="radio" name="group0" id="radio3" value="9"/>
+ </div>
+ </fieldset>
+ <fieldset>
+ <legend>
+ Checkbox
+ </legend>
+ <div>
+ <span>Minimum 2 checkbox :
+ <br/>
+ </span>
+ <input class="validate[minCheckbox[2]] checkbox" type="checkbox" name="group1" id="maxcheck1" value="5"/>
+ <input class="validate[minCheckbox[2]] checkbox" type="checkbox" name="group1" id="maxcheck2" value="3"/>
+ <input class="validate[minCheckbox[2]] checkbox" type="checkbox" name="group1" id="maxcheck3" value="9"/>
+ </div>
+ </fieldset>
+ <input class="submit" type="submit" value="Validate & Send the form!"/>
+ <hr/>
+ </form>
+ </body>
+</html>
View
151 demoLiveEvent.html
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+ <title>JQuery Validation Engine</title>
+ <link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>
+ <link rel="stylesheet" href="css/template.css" type="text/css"/>
+ <script src="js/jquery-1.4.4.min.js" type="text/javascript">
+ </script>
+ <script src="js/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8">
+ </script>
+ <script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8">
+ </script>
+ <script>
+ jQuery(document).ready(function(){
+ // binds form submission and fields to the validation engine
+ jQuery("#formID").validationEngine('attach', {bindMethod:"live"});
+
+ });
+ </script>
+ </head>
+ <body>
+ <p>
+ <a href="#" onclick="alert('is the form valid? '+jQuery('#formID').validationEngine('validate'))">Evaluate form</a>
+ | <a href="#" onclick='jQuery("#formID").validationEngine("detach");'>Detach</a>
+
+ | <a href="index.html" >Back to index</a>
+ </p>
+ <p>
+ This demonstration shows how to use the predefined regular expressions
+ </p>
+ <form id="formID" class="formular" method="post" action="">
+ <fieldset>
+ <legend>
+ Phone
+ </legend>
+ <label>
+ +103-304-340-4300-043
+ <br/>
+ +1 305 768 23 34 ext 23
+ <br/>
+ +1 (305) 768-2334 extension 703
+ <br/>
+ +1 (305) 768-2334 x703
+ <br/>
+ 04312 / 777 777
+ <br/>
+ 01-47.34/32 56
+ <br/>
+ (01865) 123456
+ <br/>
+ <span>Phone : </span>
+ <input value="+1 305 768 23 34 ext 23 BUG" class="validate[required,custom[phone]] text-input" type="text" name="telephone" id="telephone" />
+ </label>
+ </fieldset>
+ <fieldset>
+ <legend>
+ URL
+ </legend>
+ <label>
+ URL begin with http:// https:// or fpl://
+ <br/>
+ <span>Enter a URL : </span>
+ <input value="http://" class="validate[required,custom[url]] text-input" type="text" name="url" id="url" />
+ </label>
+ </fieldset>
+ <fieldset>
+ <legend>
+ Email
+ </legend>
+ <label>
+ <span>Email address : </span>
+ <input value="forced_error" class="validate[required,custom[email]] text-input" type="text" name="email" id="email" />
+ </label>
+ </fieldset>
+ <fieldset>
+ <legend>
+ IP Address
+ </legend>
+ <label>
+ <span>IP: </span>
+ <input value="192.168.3." class="validate[required,custom[ipv4]] text-input" type="text" name="ip" id="ip" />
+ </label>
+ </fieldset>
+ <fieldset>
+ <legend>
+ Date
+ </legend>
+ <label>
+ ISO 8601 dates only YYYY-mm-dd
+ <br/>
+ <span>Date: </span>
+ <input value="201-12-01" class="validate[required,custom[date]] text-input" type="text" name="date" id="date" />
+ </label>
+ </fieldset>
+ <fieldset>
+ <legend>
+ Number
+ </legend>
+ <label>
+ a signed floating number, ie: -3849.354, 38.00, 38, .77
+ <br/>
+ <span>Number: </span>
+ <input value="-33.87a" class="validate[required,custom[number]] text-input" type="text" name="number" id="number" />
+ </label>
+ </fieldset>
+ <fieldset>
+ <legend>
+ Integer
+ </legend>
+ <label>
+ an signed integer: ie +34, 34 or -1
+ <br/>
+ <span>Number: </span>
+ <input value="10.1" class="validate[required,custom[integer]] text-input" type="text" name="integer" id="integer" />
+ </label>
+ </fieldset>
+ <fieldset>
+ <legend>
+ onlyLetterNumber
+ </legend>
+ <label>
+ <span>only [0-9a-zA-Z]</span>
+ <input value="too many spaces obviously" class="validate[required,custom[onlyLetterNumber]] text-input" type="text" name="special" id="special" />
+ </label>
+ </fieldset>
+ <fieldset>
+ <legend>
+ Only Numbers (char)
+ </legend>
+ <label>
+ <span>only [0-9] and space</span>
+ <input value="10.1" class="validate[required,custom[onlyNumberSp]] text-input" type="text" name="onlynumber" id="onlynumber" />
+ </label>
+ </fieldset>
+ <fieldset>
+ <legend>
+ OnlyLetter
+ </legend>
+ <label>
+ <span>only ascii letters, space and '</span>
+ <input value="this is an invalid char '.'" class="validate[required,custom[onlyLetterSp]] text-input" type="text" name="onlyascii" id="onlyascii" />
+ </label>
+ </fieldset><input class="submit" type="submit" value="Validate & Send the form!"/><hr/>
+ </form>
+
+
+
+
+ </body>
+</html>
View
236 demoMultipleForms.html
@@ -0,0 +1,236 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <title>JQuery Validation Engine</title>
+ <link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css">
+ <link rel="stylesheet" href="css/template.css" type="text/css">
+ <script src="js/jquery-1.4.4.min.js" type="text/javascript">
+ </script>
+ <script src="js/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8">
+ </script>
+ <script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8">
+ </script>
+ <script>
+
+ jQuery(document).ready(function(){
+ // binds form submission and fields to the validation engine
+ jQuery("#formID1").validationEngine('attach', {promptPosition : "centerRight"});
+ jQuery("#formID2").validationEngine('attach', {promptPosition : "bottomLeft"});
+ jQuery("#formID3").validationEngine('attach', {promptPosition : "bottomRight"});
+ jQuery("#formID4").validationEngine('attach', {promptPosition : "topLeft"});
+ });
+ </script>
+ </head>
+ <body>
+ <p>
+ <a href="#" onclick="alert('is the form valid? '+jQuery('#formID1').validationEngine('validate'))">Evaluate form</a>
+ | <a href="#" onclick="jQuery('#formID1').validationEngine('hideAll')">Close all prompts</a>
+ | <a href="index.html" onclick="">Back to index</a>
+ </p>
+ <p>
+ This demonstration shows the use of multiple forms on the same page.<br/>
+ Note: field ids MUST be unique accross the page
+
+ </p>
+ <table width="100%">
+ <tbody>
+ <tr>
+ <td>
+ <form id="formID1" class="formular" method="post" action="">
+ <fieldset>
+ <legend>
+ Phone
+ </legend>
+ <label>
+ +103-304-340-4300-043
+ <br>
+ +1 305 768 23 34 ext 23
+ <br>
+ +1 (305) 768-2334 extension 703
+ <br>
+ +1 (305) 768-2334 x703
+ <br>
+ 04312 / 777 777
+ <br>
+ 01-47.34/32 56
+ <br>
+ (01865) 123456
+ <br>
+ <span>Phone : </span>
+ <input value="+1 305 768 23 34 ext 23 BUG" class="validate[required,custom[phone]] text-input" type="text" name="telephone" id="telephone" />
+ </label>
+ </fieldset>
+ <fieldset>
+ <legend>
+ URL
+ </legend>
+ <label>
+ URL begin with http:// https:// or fpl://
+ <br>
+ <span>Enter a URL : </span>
+ <input value="http://" class="validate[required,custom[url]] text-input" type="text" name="url" id="url" />
+ </label>
+ </fieldset>
+ <fieldset>
+ <legend>
+ Email
+ </legend>
+ <label>
+ <span>Email address : </span>
+ <input value="forced_error" class="validate[required,custom[email]] text-input" type="text" name="email" id="email" />
+ </label>
+ </fieldset>
+ <fieldset>
+ <legend>
+ IP Address
+ </legend>
+ <label>
+ <span>IP: </span>
+ <input value="192.168.3." class="validate[required,custom[ipv4]] text-input" type="text" name="ip" id="ip" />
+ </label>
+ </fieldset><input class="submit" type="submit" value="Validate & Send the form!" />
+ <a href="#" onclick="$('#formID1').validationEngine('hide'); return false;">Hide prompts</a>
+ <hr/>
+ </form>
+ </td>
+ <td>
+ <form id="formID2" class="formular" method="post" action="">
+ <fieldset>
+ <legend>
+ Date
+ </legend>
+ <label>
+ ISO 8601 dates only YYYY-mm-dd
+ <br>
+ <span>Date: </span>
+ <input value="201-12-01" class="validate[required,custom[date]] text-input" type="text" name="date" id="date" />
+ </label>
+ </fieldset>
+ <fieldset>
+ <legend>
+ Number
+ </legend>
+ <label>
+ a signed floating number, ie: -3849.354, 38.00, 38, .77
+ <br>
+ <span>Number: </span>
+ <input value="-33.87a" class="validate[required,custom[number]] text-input" type="text" name="number" id="number" />
+ </label>
+ </fieldset>
+ <fieldset>
+ <legend>
+ Integer
+ </legend>
+ <label>
+ an signed integer: ie +34, 34 or -1
+ <br>
+ <span>Number: </span>
+ <input value="10.1" class="validate[required,custom[integer]] text-input" type="text" name="integer" id="integer" />
+ </label>
+ </fieldset><input class="submit" type="submit" value="Validate & Send the form!" /><hr/>
+ </form>
+ </td>
+ </tr>
+
+
+ <tr>
+ <td>
+ <form id="formID3" class="formular" method="post" action="">
+ <fieldset>
+ <legend>
+ Phone
+ </legend>
+ <label>
+ +103-304-340-4300-043
+ <br>
+ +1 305 768 23 34 ext 23
+ <br>
+ +1 (305) 768-2334 extension 703
+ <br>
+ +1 (305) 768-2334 x703
+ <br>
+ 04312 / 777 777
+ <br>
+ 01-47.34/32 56
+ <br>
+ (01865) 123456
+ <br>
+ <span>Phone : </span>
+ <input value="+1 305 768 23 34 ext 23 BUG" class="validate[required,custom[phone]] text-input" type="text" name="telephone" id="telephone2" />
+ </label>
+ </fieldset>
+ <fieldset>
+ <legend>
+ URL
+ </legend>
+ <label>
+ URL begin with http:// https:// or fpl://
+ <br>
+ <span>Enter a URL : </span>
+ <input value="http://" class="validate[required,custom[url]] text-input" type="text" name="url" id="url2" />
+ </label>
+ </fieldset>
+ <fieldset>
+ <legend>
+ Email
+ </legend>
+ <label>
+ <span>Email address : </span>
+ <input value="forced_error" class="validate[required,custom[email]] text-input" type="text" name="email" id="email2" />
+ </label>
+ </fieldset>
+ <fieldset>
+ <legend>
+ IP Address
+ </legend>
+ <label>
+ <span>IP: </span>
+ <input value="192.168.3." class="validate[required,custom[ipv4]] text-input" type="text" name="ip" id="ip2" />
+ </label>
+ </fieldset><input class="submit" type="submit" value="Validate & Send the form!" /><hr/>
+ </form>
+ </td>
+ <td>
+ <form id="formID4" class="formular" method="post" action="">
+ <fieldset>
+ <legend>
+ Date
+ </legend>
+ <label>
+ ISO 8601 dates only YYYY-mm-dd
+ <br>
+ <span>Date: </span>
+ <input value="201-12-01" class="validate[required,custom[date]] text-input" type="text" name="date" id="date2" />
+ </label>
+ </fieldset>
+ <fieldset>
+ <legend>
+ Number
+ </legend>
+ <label>
+ a signed floating number, ie: -3849.354, 38.00, 38, .77
+ <br>
+ <span>Number: </span>
+ <input value="-33.87a" class="validate[required,custom[number]] text-input" type="text" name="number" id="number2" />
+ </label>
+ </fieldset>
+ <fieldset>
+ <legend>
+ Integer
+ </legend>
+ <label>
+ an signed integer: ie +34, 34 or -1
+ <br>
+ <span>Number: </span>
+ <input value="10.1" class="validate[required,custom[integer]] text-input" type="text" name="integer" id="integer2" />
+ </label>
+ </fieldset><input class="submit" type="submit" value="Validate & Send the form!" /><hr/>
+ </form>
+ </td>
+ </tr>
+
+ </tbody>
+ </table>
+ </body>
+</html>
View
146 demoOverflown.html
@@ -0,0 +1,146 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html>
+ <head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+ <title>JQuery Validation Engine</title>
+ <link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>
+ <link rel="stylesheet" href="css/template.css" type="text/css"/>
+ <style>
+ .inputContainer{position:relative; float:left;}
+ </style>
+ <script src="js/jquery-1.4.4.min.js" type="text/javascript">
+ </script>
+ <script src="js/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8">
+ </script>
+ <script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8">
+ </script>
+ <script>
+ jQuery(document).ready(function(){
+
+ jQuery("#formID").validationEngine({
+ isOverflown: true,
+ overflownDIV: "#divOverflown"
+ });
+ jQuery("#formID").validationEngine('attach');
+
+ });
+ </script>
+ </head>
+ <body>
+ <div id="divOverflown" style="overflow:scroll; padding-top:50px; margin-top:300px; position:relative; float:left; height: 300px; width:900px;">
+ <form id="formID" class="formular" method="post" action="">
+ <fieldset>
+ <legend>
+ Phone
+ </legend>
+ <label>
+ +103-304-340-4300-043
+ <br/>
+ +1 305 768 23 34 ext 23
+ <br/>
+ +1 (305) 768-2334 extension 703
+ <br/>
+ +1 (305) 768-2334 x703
+ <br/>
+ 04312 / 777 777
+ <br/>
+ 01-47.34/32 56
+ <br/>
+ (01865) 123456
+ <br/>
+ <span>Phone : </span>
+ <div class="inputContainer"><input value="+1 305 768 23 34 ext 23 BUG" class="validate[required,custom[phone]] text-input" type="text" name="telephone" id="telephone" /></div>
+ </label>
+ </fieldset>
+ <fieldset>
+ <legend>
+ URL
+ </legend>
+ <label>
+ URL begin with http:// https:// or fpl://
+ <br/>
+ <span>Enter a URL : </span>
+ <div class="inputContainer"><input value="http://" class="validate[required,custom[url]] text-input" type="text" name="url" id="url" /></div>
+ </label>
+ </fieldset>
+ <fieldset>
+ <legend>
+ Email
+ </legend>
+ <label>
+ <span>Email address : </span>
+ <div class="inputContainer"><input value="forced_error" class="validate[required,custom[email]] text-input" type="text" name="email" id="email" /></div>
+ </label>
+ </fieldset>
+ <fieldset>
+ <legend>
+ IP Address
+ </legend>
+ <label>
+ <span>IP: </span>
+ <div class="inputContainer"><input value="192.168.3." class="validate[required,custom[ipv4]] text-input" type="text" name="ip" id="ip" /></div>
+ </label>
+ </fieldset>
+ <fieldset>
+ <legend>
+ Date
+ </legend>
+ <label>
+ ISO 8601 dates only YYYY-mm-dd
+ <br/>
+ <span>Date: </span>
+ <div class="inputContainer"><input value="201-12-01" class="validate[required,custom[date]] text-input" type="text" name="date" id="date" />
+ </label>
+ </fieldset>
+ <fieldset>
+ <legend>
+ Number
+ </legend>
+ <label>
+ a signed floating number, ie: -3849.354, 38.00, 38, .77
+ <br/>
+ <span>Number: </span>
+ <div class="inputContainer"><input value="-33.87a" class="validate[required,custom[number]] text-input" type="text" name="number" id="number" /></div>
+ </label>
+ </fieldset>
+ <fieldset>
+ <legend>
+ Integer
+ </legend>
+ <label>
+ an signed integer: ie +34, 34 or -1
+ <br/>
+ <span>Number: </span>
+ <div class="inputContainer"><input value="10.1" class="validate[required,custom[integer]] text-input" type="text" name="integer" id="integer" /></div>
+ </label>
+ </fieldset>
+ <fieldset>
+ <legend>
+ onlyLetterNumber
+ </legend>
+ <label>
+ <span>only [0-9a-zA-Z]</span>
+ <div class="inputContainer"><input value="too many spaces obviously" class="validate[required,custom[onlyLetterNumber]] text-input" type="text" name="special" id="special" /></div>
+ </label>
+ </fieldset>
+ <fieldset>
+ <legend>
+ onlyNumberSp
+ </legend>
+ <label>
+ <span>only [0-9] and space</span>
+ <div class="inputContainer"><input value="10.1" class="validate[required,custom[onlyNumberSp]] text-input" type="text" name="onlynumber" id="onlynumber" /></div>
+ </label>
+ </fieldset>
+ <fieldset>
+ <legend>
+ onlyLetterSp
+ </legend>
+ <label>
+ <span>only ascii letters, space and '</span>
+ <div class="inputContainer"><input value="this is an invalid char '.'" class="validate[required,custom[onlyLetterSp]] text-input" type="text" name="onlyascii" id="onlyascii" /></div>
+ </label>
+ </fieldset><input class="submit" type="submit" value="Validate & Send the form!"/><hr/>
+ </form>
+ </body>
+ </html>
View
259 demoRegExp.html
@@ -1,113 +1,152 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<!DOCTYPE html>
<html>
- <head>
- <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
- <title>Jquery Inline Form Validation Engine</title>
- <link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css" media="screen" title="no title" charset="utf-8" />
- <link rel="stylesheet" href="css/template.css" type="text/css" media="screen" title="no title" charset="utf-8" />
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.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>
-