diff --git a/production/form_validation.html b/production/form_validation.html index f72ce5b116f7e8b89f7281e4e417dd4bdd2c0a5b..a73456ba2b86f80432c8452b5584cd88f1415ac0 100755 --- a/production/form_validation.html +++ b/production/form_validation.html @@ -418,7 +418,7 @@ - + diff --git a/vendors/validator/.bower.json b/vendors/validator/.bower.json index 81baefa9c394e214f26e55b67d3d68f308826be6..c2ba61cee9f48319ee6f332e6a9a540665d13818 100644 --- a/vendors/validator/.bower.json +++ b/vendors/validator/.bower.json @@ -1,12 +1,12 @@ { "name": "validator", "homepage": "https://github.com/yairEO/validator", - "version": "1.0.6", - "_release": "1.0.6", + "version": "1.1.0", + "_release": "1.1.0", "_resolution": { "type": "version", - "tag": "1.0.6", - "commit": "0d29600be602f2d77b37bc5bc601a0d2c4416b65" + "tag": "1.1.0", + "commit": "f855eb37c626f2ad712583d25afdd30147a40d8e" }, "_source": "https://github.com/yairEO/validator.git", "_target": "^1.0.6", diff --git a/vendors/validator/README.md b/vendors/validator/README.md index 24e27016862068478b93151f541884008ea8b2c8..2e9242b0531a9fd7d278ca946bdee167e65ca91c 100644 --- a/vendors/validator/README.md +++ b/vendors/validator/README.md @@ -4,7 +4,7 @@ The javascript validation code is based on jQuery. The Validator is cross-browse In the semantic point-of-view, I believe that this method is very clean and…appropriate. This is how forms should be, IMHO. -[DEMO PAGE](http://dropthebit.com/demos/validator/validator.html) +[DEMO PAGE](http://yaireo.github.io/validator) ### Why should you use this? @@ -26,7 +26,10 @@ These input types can be validated by the the JS for – `
? @@ -57,7 +60,7 @@ The below form elements are also supported:
- ... + ... ### Explaining the DOM @@ -66,36 +69,18 @@ Next, inside an item, there will typically be an input or select or something of The whole approach here is to define each form field (input, select, whatever) as much as possible with HTML5 attributes and also with custom attributes. -**required attribute** -Defines that this field should be validated (with JS by my implementation and not via native HTML5 browser defaults) +| Attribute | Purpose | +|----------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| required | Defines that this field should be validated (with JS by my implementation and not via native HTML5 browser defaults) | +| placeholder | Writes some placeholder text which usually describes the fields with some example input (not supported in IE8 and below) | +| pattern | Defines a pattern which the field is evaluated with. Available values are:
**numeric** - Allow only numbers
**alphanumeric** - Allow only numbers or letters. No special language characters
**phone** - Allow only numbers, spaces or dashes.

Alternatively, you may write your own custom regex here as well. | +| data-validate-words | Defines the minimum amount of words for this field | +| data-validate-length | Defines the length allowed for the field (after trim). Example value: `7,11` (field can only have 7 or 11 characters). you can add how many allowed lengths you wish | +| data-validate-length-range | Defines the minimum and/or maximum number of chars in the field (after trim). value can be `4,8` for example, or just `4` to set minimum chars only | +| data-validate-linked | Defines the field which the current field’s value (the attribute is set on) should be compared to | +| data-validate-minmax | For type `number` only. Defines the minimum and/or maximum value that can be in that field | -**placeholder attribute** -Writes some placeholder text which usually describes the fields with some example input (not supported in IE8 and below) -**data-validate-words custom attribute** -Defines the minimum amount of words for this field - -**data-validate-length custom attribute** -Defines the length allowed for the field (after trim). Example value: “7,11″ (field can only have 7 or 11 characters). you can add how many allowed lengths you wish - -**data-validate-length-range custom attribute** -Defines the minimum and/or maximum number of chars in the field (after trim). value can be “4,8″ for example, or just “4″ to set minimum chars only - -**data-validate-linked custom attribute** -Defines the field which the current field’s value (the attribute is set on) should be compared to - -**data-validate-minmax custom attribute** -For type ‘number’ only. Defines the minimum and/or maximum value that can be in that field. - -**data-validate-pattern custom attribute** -Defines a pattern which the field is evaluated with. Available values are: - -*numeric* - Allow only numbers - -*alphanumeric* - Allow only numbers or letters. No special language characters - -*phone* - Allow only numbers, spaces or dashes -aleternativly, you can write your own custom regex here as well. ### Optional fields @@ -104,7 +89,8 @@ There is also support for optional fields, which are not validated, unless they ## Error messages -The validator function holds a messages object called ‘message’, which itself holds all the error messages being shown to the user for all sort of validation errors. +The validator function holds a messages object called "message", which itself holds all the error messages being shown to the user for all sort of validation errors. + message = { invalid : 'invalid input', empty : 'please put something here', @@ -121,11 +107,11 @@ The validator function holds a messages object called ‘message’, which itsel complete : 'input is not complete', select : 'Please select an option' }; - -This object can be extended easily. The idea is to extend it with new keys which represent the name of the field you want the message to be linked to, and that custom message appear as the ‘general error’ one. Default messages can be over-ride. + +This object can be extended easily. The idea is to extend it with new keys which represent the name of the field you want the message to be linked to, and that custom message appear as the `general error` one. Default messages can be over-ride. Example: for a given type ‘date’ field, lets set a custom (general error) message like so: `validator.message['date'] = 'not a real date';` - + Error messages can be disabled: `validator.defaults.alerts = false;` @@ -133,32 +119,40 @@ Error messages can be disabled: There are 2 ways to validate form fields, one is on the submit event of the form itself, then all the fields are evaluated one by one. The other method is by binding the ‘checkField’ function itself to each field, for events like “Blur”, “Change” or whatever event you wish (I prefer on Blur). -###Example - 1 +###Usage example - validate on submit + +A generic callback function using jQuery to have the form validated on the **Submit** event. You can also include your own personal validations before the **checkAll()** call. -A generic callback function using jQuery to have the form validated on the “Submit” event. You can also include your own personal validations before the **checkAll()** call. $('form').submit(function(e){ e.preventDefault(); var submit = true; // you can put your own custom validations below - - // check all the rerquired fields - if( !validator().checkAll( $(this) ) ) + + // check all the rerquired fields + if( !validator.checkAll( $(this) ) ) submit = false; - + if( submit ) this.submit(); - + return false; }) -###Example - 2 -Check every field once it looses focus (onBlur) event (using jQuery 1.7.1 new ‘on’ method which is like the old .deligate() in this case). - $('form').on('blur', 'input[required]', validator().checkField); +###Usage example - validate on field blur event (out of focus) +Check every field once it looses focus (onBlur) event + + $('form').on('blur', 'input[required]', validator.checkField); ## Tooltips The helper tooltips **<div class='tooltip help'>**, which work using pure CSS, are element which holds a small **'?'** icon and when hovered over with the mouse, reveals a text explaining what the field “item” is about or for example, what the allowed input format is. +## Classes +`validator.defaults.classes` object can be modified with these classes: + + item : 'item', // class for each input wrapper + alert : 'alert', // call on the alert tooltip + bad : 'bad' // classes for bad input ## Bonos – multifields diff --git a/vendors/validator/fv.css b/vendors/validator/fv.css index 6aef2b3f7da56293290b5b4aebdf70c5ecde1031..a51bfe061a9795e4edcdad6e32b39a0cfd553c77 100644 --- a/vendors/validator/fv.css +++ b/vendors/validator/fv.css @@ -28,7 +28,13 @@ h1{ font-size:2em; margin:0 0 50px 0; } button{ cursor:pointer; } p{ padding:5px 0; } -#wrap{ padding:50px; width:860px; background-color:#FFF; margin:50px auto; border:1px dashed #AAA; position:relative; } +a{ text-decoration:none; } +.btn{ margin:5px; font-size:1.3em; font-weight:bold; border:2px solid rgba(0,0,0,0.2); display:inline-block; box-shadow:0 -30px 30px -15px #00329B inset, 0 1px 0 rgba(255,255,255,0.3) inset; background:#0088CC; background-repeat:repeat-x; color:#FFF; text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25); border-radius:7px; padding:10px 20px; -webkit-transition:0.15s; transition:0.15s; } +.btn:hover{ background:#0068BA; } +.btn:active{ box-shadow:0 0 0 0 rgba(0, 0, 0, 0.3), 0 -30px 30px -15px #00329B inset, 0 0 6px #00243F inset; } +.btn.github{ float:right; } + +#wrap{ padding:50px; width:860px; background-color:#FFF; margin:20px auto; border:1px dashed #AAA; position:relative; } .options{ position:absolute; top:-1px; right:-1px; background-color:#F1F1F1; padding:4px 0; border-left:1px dashed #AAA; border-bottom:1px dashed #AAA; } .options label{ cursor:pointer; margin:0 10px; } @@ -37,13 +43,13 @@ input, select{ font-size:inherit; margin:0; } input:focus, textarea:focus{ border-color:#AAA; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; } -input[type=checkbox]{ border:none; bottom:-1px; cursor:pointer; margin:0 5px 0 0; position:relative; } +input[type=checkbox]{ width:auto; border:none; bottom:-1px; cursor:pointer; margin:2px 8px 0 0; position:relative; transform:scale(1.2); } button[type=submit]{ font-size:1.1em; padding:5px 25px; } /* Tooltips helpers */ .item .tooltip{ float:left; top:2px; left:7px; position:relative; z-index:2; } .item .tooltip:hover{ z-index:3; } - .item .tooltip > span{ display:inline-block; width:16px; height:16px; line-height:16px; font-size:0.9em; font-weight:bold; text-align:center; color:#FFF; cursor:help; background-color:#00AEEF; position:relative; border-radius:10px; } + .item .tooltip > span{ display:inline-block; width:15px; height:15px; line-height:15px; font-size:0.9em; font-weight:bold; text-align:center; color:#FFF; cursor:help; background-color:#00AEEF; position:relative; border-radius:10px; } .item .tooltip .content{ opacity:0; width:200px; background-color:#333; color:#FFF; font-size:0.9em; position:absolute; top:0; left:20px; padding:8px; border-radius:6px; pointer-events:none; transition:0.2s cubic-bezier(0.1, 0.1, 0.25, 2); -webkit-transition:0.3s cubic-bezier(0.1, 0.2, 0.5, 2.2); -moz-transition:0.3s cubic-bezier(0.1, 0.2, 0.5, 2.2); } .item .tooltip p{ padding:0; } .item .tooltip.down .content{ left:auto; right:0; top:30px; } @@ -52,26 +58,34 @@ button[type=submit]{ font-size:1.1em; padding:5px 25px; } .item .tooltip.down .content b{ left:auto; right:6px; top:-10px; border-width:5px; border-color:transparent #333 #333 transparent; } /* alerts (when validation fails) */ -.item .alert{ float:left; margin:0 0 0 20px; padding:3px 10px; position:relative; color:#FFF; border-radius:3px 4px 4px 3px; background-color:#CE5454; max-width:170px; white-space:pre; z-index:1; } +.item .alert{ float:left; margin:-2px 0 0 20px; padding:3px 10px; color:#FFF; border-radius:3px 4px 4px 3px; background-color:#CE5454; max-width:170px; white-space:pre; position:relative; left:-15px; opacity:0; z-index:1; transition:0.15s ease-out; } .item .alert::after{ content:''; display:block; height:0; width:0; border-color:transparent #CE5454 transparent transparent; border-style:solid; border-width:11px 7px; position:absolute; left:-13px; top:1px; } +.item.bad .alert{ left:0; opacity:1; } + -@-moz-keyframes shake{ - 25%{ left: -6px; } - 75%{ left: 6px; } +@keyframes shake{ + 15%{ transform:translateX(-5px); } + 30%{ transform:translateX(5px); } + 45%{ transform:translateX(-3px); } + 60%{ transform:translateX(3px); } + 75%{ transform:translateX(2px); } + 100%{ transform:none; } } @-webkit-keyframes shake{ - 33%{ left: -6px; } - 50%{ left:0; } - 66%{ left: 6px; } + 25%{ -webkit-transform:translateX(-6px); } + 75%{ -webkit-transform:translateX(6px); } } form fieldset{ clear:both; margin:0 0 10px 0; } form .item{ padding:5px 0; position:relative; height:2em; } form .item.items{ height:auto; } - .item label{ float:left; } - .item label span{ float:left; width:160px; text-transform:capitalize; line-height:2em; } + .item label, .item .label{ float:left; cursor:pointer; } + .item label span, .item .label{ float:left; width:160px; text-transform:capitalize; line-height:2em; } .item input, .item textarea{ float:left; padding:3px 4px; width:210px; -webkit-transition:0.2s; -moz-transition:0.2s; transition:0.2s; } - .item input{ } + .item input[type=checkbox]{ width:auto; } + + .label ~ label{ vertical-align:middle; margin:0.3em 1.2em 0 0; } + .item input.short{ width:90px; } .item input:focus:not([type="checkbox"]), .item textarea:focus{ box-shadow:0 0 4px #00AEEF; border:1px solid #00AEEF; } .item textarea{ } @@ -79,14 +93,17 @@ form .item.items{ height:auto; } .item select option{ padding:1px; } .item > .extra{ float:left; font-size:0.9em; color:#999; line-height:2em; margin-left:13px; } - + .item.multi .input{ float:left; } .item.multi input{ float:left; margin-right:5px; width:35px; text-align:center; } form .item.multi input:nth-last-child(-n+2){ margin:0; } .item.items input{ border-top:5px solid #E1E1E1; margin:0 0 0 160px; } - - .bad input[required=required], .bad input.optional, .bad select, .bad textarea{ border:1px solid #CE5454; box-shadow:0 0 4px -2px #CE5454; position:relative; left:0; -moz-animation:.3s 2 shake linear; -webkit-animation:0.3s 2 shake linear; } - + + .bad input, + .bad select, + .bad textarea{ border:1px solid #CE5454; box-shadow:0 0 4px -2px #CE5454; position:relative; left:0; -moz-animation:.7s 1 shake linear; -webkit-animation:0.7s 1 shake linear; } + + /* mode2 - where the label's text is above the field and not next to it --------------------------------------------------------------------------- */ .mode2 .item{ float:left; clear:left; margin-bottom:30px; height:auto; padding:0; zoom:1; } @@ -95,7 +112,7 @@ form .item.items{ height:auto; } .mode2 .item::after{ clear:both; } .mode2 .item label{ } .mode2 .item label span{ float:none; display:block; line-height:inherit; } - .mode2 .item input, .item textarea{ width:250px; margin:0; } + .mode2 .item input:not(type="checkbox"), .item textarea{ width:250px; margin:0; } .mode2 .item textarea{ width:350px; margin:0; } .mode2 .item select{ width:260px; float:none; } .mode2 .item.multi label{ float:none; } diff --git a/vendors/validator/validator.html b/vendors/validator/index.html similarity index 81% rename from vendors/validator/validator.html rename to vendors/validator/index.html index 7d6830017eb5aaa5d9973eaddaedc5bb9cc8790d..925302568700068abdfb861470346cb9c48c0653 100644 --- a/vendors/validator/validator.html +++ b/vendors/validator/index.html @@ -3,6 +3,7 @@ Total Form Validation + + Github