jinql
/
gentelella
mirror of https://github.com/ColorlibHQ/gentelella
1
0
Fork 0
Code Issues Releases Wiki Activity

Fix TypeError on form validation page

pull/195/head
christianesperar 2016-06-07 23:58:13 +08:00
parent 8fd7d36b73
commit fed9bbbf8b
8 changed files with 572 additions and 473 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
production/form_validation.html
View File

@ -418,7 +418,7 @@
<!-- NProgress --> <!-- NProgress -->
<script src="../vendors/nprogress/nprogress.js"></script> <script src="../vendors/nprogress/nprogress.js"></script>
<!-- validator --> <!-- validator -->
<script src="../vendors/validator/validator.min.js"></script> <script src="../vendors/validator/validator.js"></script>
<!-- Custom Theme Scripts --> <!-- Custom Theme Scripts -->
<script src="../build/js/custom.min.js"></script> <script src="../build/js/custom.min.js"></script>

8
vendors/validator/.bower.json vendored
View File

@ -1,12 +1,12 @@
{ {
"name": "validator", "name": "validator",
"homepage": "https://github.com/yairEO/validator", "homepage": "https://github.com/yairEO/validator",
"version": "1.0.6", "version": "1.1.0",
"_release": "1.0.6", "_release": "1.1.0",
"_resolution": { "_resolution": {
"type": "version", "type": "version",
"tag": "1.0.6", "tag": "1.1.0",
"commit": "0d29600be602f2d77b37bc5bc601a0d2c4416b65" "commit": "f855eb37c626f2ad712583d25afdd30147a40d8e"
}, },
"_source": "https://github.com/yairEO/validator.git", "_source": "https://github.com/yairEO/validator.git",
"_target": "^1.0.6", "_target": "^1.0.6",

68
vendors/validator/README.md vendored
View File

@ -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. 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? ### Why should you use this?
@ -26,7 +26,10 @@ These input types can be validated by the the JS for – `<input type='foo' name
* Number * Number
* Date * Date
* URL * URL
* Search
* File
* Tel * Tel
* Checkbox
* Hidden – Hidden fields can also have the ‘required’ attribute * Hidden – Hidden fields can also have the ‘required’ attribute
The below form elements are also supported: The below form elements are also supported:
@ -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. 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** | Attribute | Purpose |
Defines that this field should be validated (with JS by my implementation and not via native HTML5 browser defaults) |----------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 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:<br>**numeric** - Allow only numbers<br>**alphanumeric** - Allow only numbers or letters. No special language characters<br>**phone** - Allow only numbers, spaces or dashes.<br><br>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 ### Optional fields
@ -104,7 +89,8 @@ There is also support for optional fields, which are not validated, unless they
## Error messages ## 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 = { message = {
invalid : 'invalid input', invalid : 'invalid input',
empty : 'please put something here', empty : 'please put something here',
@ -122,7 +108,7 @@ The validator function holds a messages object called ‘message’, which itsel
select : 'Please select an option' 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: Example: for a given type ‘date’ field, lets set a custom (general error) message like so:
`validator.message['date'] = 'not a real date';` `validator.message['date'] = 'not a real date';`
@ -133,16 +119,17 @@ 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). 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){ $('form').submit(function(e){
e.preventDefault(); e.preventDefault();
var submit = true; var submit = true;
// you can put your own custom validations below // you can put your own custom validations below
// check all the rerquired fields // check all the rerquired fields
if( !validator().checkAll( $(this) ) ) if( !validator.checkAll( $(this) ) )
submit = false; submit = false;
if( submit ) if( submit )
@ -150,15 +137,22 @@ A generic callback function using jQuery to have the form validated on the “Su
return false; 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 ## Tooltips
The helper tooltips **&lt;div class='tooltip help'&gt;**, 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. The helper tooltips **&lt;div class='tooltip help'&gt;**, 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 ## Bonos – multifields

47
vendors/validator/fv.css vendored
View File

@ -28,7 +28,13 @@ h1{ font-size:2em; margin:0 0 50px 0; }
button{ cursor:pointer; } button{ cursor:pointer; }
p{ padding:5px 0; } 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{ 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; } .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: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=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; } button[type=submit]{ font-size:1.1em; padding:5px 25px; }
/* Tooltips helpers */ /* Tooltips helpers */
.item .tooltip{ float:left; top:2px; left:7px; position:relative; z-index:2; } .item .tooltip{ float:left; top:2px; left:7px; position:relative; z-index:2; }
.item .tooltip:hover{ z-index:3; } .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 .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 p{ padding:0; }
.item .tooltip.down .content{ left:auto; right:0; top:30px; } .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; } .item .tooltip.down .content b{ left:auto; right:6px; top:-10px; border-width:5px; border-color:transparent #333 #333 transparent; }
/* alerts (when validation fails) */ /* 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 .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; } @keyframes shake{
75%{ left: 6px; } 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{ @-webkit-keyframes shake{
33%{ left: -6px; } 25%{ -webkit-transform:translateX(-6px); }
50%{ left:0; } 75%{ -webkit-transform:translateX(6px); }
66%{ left: 6px; }
} }
form fieldset{ clear:both; margin:0 0 10px 0; } form fieldset{ clear:both; margin:0 0 10px 0; }
form .item{ padding:5px 0; position:relative; height:2em; } form .item{ padding:5px 0; position:relative; height:2em; }
form .item.items{ height:auto; } form .item.items{ height:auto; }
.item label{ float:left; } .item label, .item .label{ float:left; cursor:pointer; }
.item label span{ float:left; width:160px; text-transform:capitalize; line-height:2em; } .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 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.short{ width:90px; }
.item input:focus:not([type="checkbox"]), .item textarea:focus{ box-shadow:0 0 4px #00AEEF; border:1px solid #00AEEF; } .item input:focus:not([type="checkbox"]), .item textarea:focus{ box-shadow:0 0 4px #00AEEF; border:1px solid #00AEEF; }
.item textarea{ } .item textarea{ }
@ -85,7 +99,10 @@ form .item.items{ height:auto; }
form .item.multi input:nth-last-child(-n+2){ margin:0; } form .item.multi input:nth-last-child(-n+2){ margin:0; }
.item.items input{ border-top:5px solid #E1E1E1; margin:0 0 0 160px; } .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 - where the label's text is above the field and not next to it
--------------------------------------------------------------------------- */ --------------------------------------------------------------------------- */
@ -95,7 +112,7 @@ form .item.items{ height:auto; }
.mode2 .item::after{ clear:both; } .mode2 .item::after{ clear:both; }
.mode2 .item label{ } .mode2 .item label{ }
.mode2 .item label span{ float:none; display:block; line-height:inherit; } .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 textarea{ width:350px; margin:0; }
.mode2 .item select{ width:260px; float:none; } .mode2 .item select{ width:260px; float:none; }
.mode2 .item.multi label{ float:none; } .mode2 .item.multi label{ float:none; }

51
vendors/validator/validator.html → vendors/validator/index.html vendored
View File

@ -3,6 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Total Form Validation</title> <title>Total Form Validation</title>
<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="stylesheet" href="fv.css" type="text/css" /> <link rel="stylesheet" href="fv.css" type="text/css" />
<!--[if IE]> <!--[if IE]>
<style> <style>
@ -12,6 +13,7 @@
<![endif]--> <![endif]-->
</head> </head>
<body> <body>
<a class='btn github' href='https://github.com/yairEO/validator'>Github</a>
<div id='wrap'> <div id='wrap'>
<div class='options'> <div class='options'>
<label> <label>
@ -30,7 +32,7 @@
<div class="item"> <div class="item">
<label> <label>
<span>Name</span> <span>Name</span>
<input data-validate-length-range="6" data-validate-words="2" name="name" placeholder="ex. John f. Kennedy" required="required" type="text" /> <input data-validate-length-range="6" data-validate-words="2" name="name" placeholder="ex. John f. Kennedy" required="required" />
</label> </label>
<div class='tooltip help'> <div class='tooltip help'>
<span>?</span> <span>?</span>
@ -54,6 +56,20 @@
</div> </div>
<span class='extra'>(optional)</span> <span class='extra'>(optional)</span>
</div> </div>
<div class="item">
<label>
<span>HTML5 Regex</span>
<!--<input required="required" type="text" pattern='\d+' />-->
<input type="text" data-validate-length-range="2,6" required="required" placeholder="eg. 123456" pattern="alphanumeric" />
</label>
<div class='tooltip help'>
<span>?</span>
<div class='content'>
<b></b>
<p>This field uses HTML5 "pattern" attribute to be validated.<br /><em>"<strong>\d+</strong>" - only digits are allowed</em></p>
</div>
</div>
</div>
<div class="item"> <div class="item">
<label> <label>
<span>email</span> <span>email</span>
@ -69,7 +85,7 @@
<div class="item"> <div class="item">
<label> <label>
<span>Number</span> <span>Number</span>
<input type="number" class='number' name="number" data-validate-minmax="10,100" data-validate-pattern="numeric" required='required'> <input type="number" class='number' name="number" data-validate-minmax="10,100" required='required'>
</label> </label>
<div class='tooltip help'> <div class='tooltip help'>
<span>?</span> <span>?</span>
@ -141,6 +157,14 @@
<input name="url" placeholder="http://www.website.com" required="required" type="url" /> <input name="url" placeholder="http://www.website.com" required="required" type="url" />
</label> </label>
</div> </div>
<div class="item">
<label>
<span>Checkboxes</span>
<label><input required="required" type="checkbox" />I agree</label>
</label>
</div>
<div class="item multi required"> <div class="item multi required">
<label for='multi_first'> <label for='multi_first'>
<span>Multifield</span> <span>Multifield</span>
@ -162,6 +186,12 @@
</div> </div>
</div> </div>
</div> </div>
<div class="item">
<label>
<span>File upload</span>
<input type='file' required>
</label>
</div>
<div class="item"> <div class="item">
<label> <label>
<span>message</span> <span>message</span>
@ -177,16 +207,21 @@
</form> </form>
</section> </section>
</div> </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="multifield.js"></script> <script src="multifield.js"></script>
<script src="validator.js"></script> <script src="validator.js"></script>
<script> <script>
// initialize the validator function // initialize the validator function
validator.message['date'] = 'not a real date'; validator.message['date'] = 'not a real date';
// validate a field on "blur" event, a 'select' on 'change' event & a '.reuired' classed multifield on 'keyup': // validate a field on "blur" event, a 'select' on 'change' event & a '.reuired' classed multifield on 'keyup':
$('form').on('blur', 'input[required], input.optional', validator.checkField) $('form')
.on('change', 'select.required', validator.checkField);; .on('blur', 'input[required], input.optional, select.required', validator.checkField)
$('.multi.required').on('keyup', 'input', function(){ .on('change', 'select.required', validator.checkField)
.on('keypress', 'input[required][pattern]', validator.keypress);
$('.multi.required')
.on('keyup blur', 'input', function(){
validator.checkField.apply( $(this).siblings().last()[0] ); validator.checkField.apply( $(this).siblings().last()[0] );
}); });
@ -196,13 +231,15 @@
$('form').submit(function(e){ $('form').submit(function(e){
e.preventDefault(); e.preventDefault();
var submit = true; var submit = true;
// evaluate the form using generic validaing
// Validate the form using generic validaing
if( !validator.checkAll( $(this) ) ){ if( !validator.checkAll( $(this) ) ){
submit = false; submit = false;
} }
if( submit ) if( submit )
this.submit(); this.submit();
return false; return false;
}); });

66
vendors/validator/multifield.js vendored
View File

@ -1,25 +1,43 @@
var multifeild = { // multifield - connects several input fields to each-other
keypress : function(e){ // By Yair Even Or / 2011 / dropthebit.com
var nextPrevField; ;(function(){
// Ignore: [tab, left & right arrows] var fixedEvent = 0;
if( /9|37|39/.test(e.keyCode) )
return;
// if hit Backspace key when the field it empty, go back one field
if( e.keyCode == 8 && !this.value )
nextPrevField = $(this).prev();
// automatically move to the next field once user has filled the current one completely
else if( this.value.length == this.maxLength && e.keyCode != 8 )
nextPrevField = $(this).next();
// set the caret at the END of the inupt element at hand function funnel(e){
if( nextPrevField ) fixedEvent++;
setCaret( nextPrevField[0], 100); var that = this;
setTimeout(function(){
keypress.call(that, e);
fixedEvent = 0;
},0);
}
function keypress(e){
var nextPrevField,
sel = [this.selectionStart, this.selectionEnd];
if( !e.charCode && e.keyCode != 37 && e.keyCode != 39 && e.keyCode != 8 )
return;
// if hit Backspace key when caret was at the beginning, or if the 'left' arrow key was pressed and the caret was at the start -> go back to previous field
if( (e.keyCode == 8 && sel[1] == 0) || (e.keyCode == 37 && sel[1] == 0) )
setCaret( $(this).prev(':text')[0], 100);
// if the 'right' arrow key was pressed and caret was at the end -> advance to the next field
else if( e.keyCode == 39 && sel[1] == this.value.length )
setCaret( $(this).next(':text')[0], 0);
// automatically move to the next field once user has filled the current one completely
else if( e.charCode && sel[1] == sel[0] && sel[0] == this.maxLength )
setCaret( $(this).next(':text')[0], 100);
function setCaret(input, pos){ function setCaret(input, pos){
if( !input ) return;
if (input.setSelectionRange){ if (input.setSelectionRange){
input.focus(); input.focus();
input.setSelectionRange(pos, pos); input.setSelectionRange(pos, pos);
} else if (input.createTextRange) { }
else if( input.createTextRange ){
var range = input.createTextRange(); var range = input.createTextRange();
range.collapse(true); range.collapse(true);
range.moveEnd('character', pos); range.moveEnd('character', pos);
@ -27,14 +45,16 @@ var multifeild = {
range.select(); range.select();
} }
} }
},
combine.apply(this);
};
// After each 'change' event of any of the fields, combine all the values to the hidden input. // After each 'change' event of any of the fields, combine all the values to the hidden input.
combine : function(e){ function combine(){
var hidden = $(this).siblings('input[type=hidden]').val(''); var hidden = $(this).siblings('input[type=hidden]').val('')[0];
$(this).siblings('input[type="text"]').andSelf().each( function(){ $(this.parentNode).find(':text').each( function(){
hidden[0].value += this.value; hidden.value += this.value;
}); });
} }
};
$('div.multi').on({'keyup':multifeild.keypress, 'change':multifeild.combine}, 'input'); $('div.multi').on({'keydown.multifeild':funnel, 'keypress.multifeild':funnel, 'change.multifeild':combine}, 'input');
})();

199
vendors/validator/validator.js vendored
View File

@ -1,20 +1,22 @@
/* /*
Validator v1.0.5 Validator v1.1.0
(c) 2012 Yair Even Or <http://dropthebit.com> (c) Yair Even Or
https://github.com/yairEO/validator
MIT-style license. MIT-style license.
*/ */
var validator = (function(){ var validator = (function($){
var message, tests, checkField, validate, mark, unmark, field, minmax, defaults, var message, tests, checkField, validate, mark, unmark, field, minmax, defaults,
validateWords, lengthRange, lengthLimit, pattern, alertTxt, data, validateWords, lengthRange, lengthLimit, pattern, alertTxt, data,
email_illegalChars = /[\(\)\<\>\,\;\:\\\/\"\[\]]/, email_illegalChars = /[\(\)\<\>\,\;\:\\\/\"\[\]]/,
email_filter = /^.+@.+\..{2,3}$/; email_filter = /^.+@.+\..{2,6}$/; // exmaple email "steve@s-i.photo"
/* general text messages /* general text messages
*/ */
message = { message = {
invalid : 'invalid input', invalid : 'invalid input',
checked : 'must be checked',
empty : 'please put something here', empty : 'please put something here',
min : 'input is too short', min : 'input is too short',
max : 'input is too long', max : 'input is too long',
@ -30,8 +32,20 @@ var validator = (function(){
select : 'Please select an option' select : 'Please select an option'
}; };
if(!window.console){
console={};
console.log=console.warn=function(){ return; }
}
// defaults // defaults
defaults = { alerts:true }; defaults = {
alerts : true,
classes : {
item : 'item',
alert : 'alert',
bad : 'bad'
}
};
/* Tests for each type of field (including Select element) /* Tests for each type of field (including Select element)
*/ */
@ -49,6 +63,7 @@ var validator = (function(){
// 'linked' is a special test case for inputs which their values should be equal to each other (ex. confirm email or retype password) // 'linked' is a special test case for inputs which their values should be equal to each other (ex. confirm email or retype password)
linked : function(a,b){ linked : function(a,b){
if( b != a ){ if( b != a ){
// choose a specific message or a general one
alertTxt = message[data.type + '_repeat'] || message.no_match; alertTxt = message[data.type + '_repeat'] || message.no_match;
return false; return false;
} }
@ -61,7 +76,8 @@ var validator = (function(){
} }
return true; return true;
}, },
text : function(a){ // a "skip" will skip some of the tests (needed for keydown validation)
text : function(a, skip){
// make sure there are at least X number of words, each at least 2 chars long. // make sure there are at least X number of words, each at least 2 chars long.
// for example 'john F kenedy' should be at least 2 words and will pass validation // for example 'john F kenedy' should be at least 2 words and will pass validation
if( validateWords ){ if( validateWords ){
@ -80,32 +96,32 @@ var validator = (function(){
} }
return true; return true;
} }
if( a.length < lengthRange[0] ){ if( !skip && lengthRange && a.length < lengthRange[0] ){
alertTxt = message.min; alertTxt = message.min;
return false; return false;
} }
// check if there is max length & field length is greater than the allowed // check if there is max length & field length is greater than the allowed
if( lengthRange[1] && a.length > lengthRange[1] ){ if( lengthRange && lengthRange[1] && a.length > lengthRange[1] ){
alertTxt = message.max; alertTxt = message.max;
return false; return false;
} }
// check if the field's value should obey any length limits, and if so, make sure the length of the value is as specified // check if the field's value should obey any length limits, and if so, make sure the length of the value is as specified
if( lengthLimit.length ){ if( lengthLimit && lengthLimit.length ){
var obeyLimit = false;
while( lengthLimit.length ){ while( lengthLimit.length ){
if( lengthLimit.pop() == a.length ) if( lengthLimit.pop() == a.length ){
obeyLimit = true;
}
if( !obeyLimit ){
alertTxt = message.complete; alertTxt = message.complete;
return false; return false;
} }
} }
}
if( pattern ){ if( pattern ){
var regex; var regex, jsRegex;
switch( pattern ){ switch( pattern ){
case 'alphanumeric' : case 'alphanumeric' :
regex = /^[a-z0-9]+$/i; regex = /^[a-zA-Z0-9]+$/i;
break; break;
case 'numeric' : case 'numeric' :
regex = /^[0-9]+$/i; regex = /^[0-9]+$/i;
@ -117,7 +133,8 @@ var validator = (function(){
regex = pattern; regex = pattern;
} }
try{ try{
if( regex && !eval(regex).test(a) ) jsRegex = new RegExp(regex).test(a);
if( a && !jsRegex )
return false; return false;
} }
catch(err){ catch(err){
@ -125,6 +142,7 @@ var validator = (function(){
return false; return false;
} }
} }
return true; return true;
}, },
number : function(a){ number : function(a){
@ -134,12 +152,12 @@ var validator = (function(){
return false; return false;
} }
// not enough numbers // not enough numbers
else if( a.length < lengthRange[0] ){ else if( lengthRange && a.length < lengthRange[0] ){
alertTxt = message.min; alertTxt = message.min;
return false; return false;
} }
// check if there is max length & field length is greater than the allowed // check if there is max length & field length is greater than the allowed
else if( lengthRange[1] && a.length > lengthRange[1] ){ else if( lengthRange && lengthRange[1] && a.length > lengthRange[1] ){
alertTxt = message.max; alertTxt = message.max;
return false; return false;
} }
@ -181,14 +199,13 @@ var validator = (function(){
return /^(https?:\/\/)?([\w\d\-_]+\.+[A-Za-z]{2,})+\/?/.test( url ); return /^(https?:\/\/)?([\w\d\-_]+\.+[A-Za-z]{2,})+\/?/.test( url );
} }
if( !testUrl( a ) ){ if( !testUrl( a ) ){
console.log(a);
alertTxt = a ? message.url : message.empty; alertTxt = a ? message.url : message.empty;
return false; return false;
} }
return true; return true;
}, },
hidden : function(a){ hidden : function(a){
if( a.length < lengthRange[0] ){ if( lengthRange && a.length < lengthRange[0] ){
alertTxt = message.min; alertTxt = message.min;
return false; return false;
} }
@ -220,56 +237,89 @@ var validator = (function(){
// check if not already marked as a 'bad' record and add the 'alert' object. // check if not already marked as a 'bad' record and add the 'alert' object.
// if already is marked as 'bad', then make sure the text is set again because i might change depending on validation // if already is marked as 'bad', then make sure the text is set again because i might change depending on validation
var item = field.parents('.item'), warning; var item = field.closest('.' + defaults.classes.item),
warning;
item.find('.alert').remove(); if( item.hasClass(defaults.classes.bad) ){
if( defaults.alerts )
item.find('.'+defaults.classes.alert).html(text);
}
if( defaults.alerts ){
warning = $('<div>').addClass('alert').text( text ); else if( defaults.alerts ){
warning = $('<div class="'+ defaults.classes.alert +'">').html( text );
item.append( warning ); item.append( warning );
} }
item.removeClass('bad'); item.removeClass(defaults.classes.bad);
// a delay so the "alert" could be transitioned via CSS
setTimeout(function(){ setTimeout(function(){
item.addClass('bad'); item.addClass(defaults.classes.bad);
}, 0); }, 0);
}; };
/* un-marks invalid fields /* un-marks invalid fields
*/ */
unmark = function( field ){ unmark = function( field ){
if( !field || !field.length ){ if( !field || !field.length ){
console.warn('no "field" argument, null or DOM object not found') console.warn('no "field" argument, null or DOM object not found');
return false; return false;
} }
field.parents('.item')
.removeClass('bad') field.closest('.' + defaults.classes.item)
.find('.alert').animate({ marginLeft:32, opacity:0 }, 200, function(){ .removeClass(defaults.classes.bad)
$(this).remove(); .find('.'+ defaults.classes.alert).remove();
});
}; };
function testByType(type, value){
if( type == 'tel' )
pattern = pattern || 'phone';
if( !type || type == 'password' || type == 'tel' || type == 'search' || type == 'file' )
type = 'text';
return tests[type] ? tests[type](value, true) : true;
}
function prepareFieldData(el){
field = $(el);
field.data( 'valid', true ); // initialize validity of field
field.data( 'type', field.attr('type') ); // every field starts as 'valid=true' until proven otherwise
pattern = field.attr('pattern');
}
/* Validations per-character keypress
*/
function keypress(e){
prepareFieldData(this);
// String.fromCharCode(e.charCode)
if( e.charCode ){
return testByType( this.type, this.value );
}
}
/* Checks a single form field by it's type and specific (custom) attributes /* Checks a single form field by it's type and specific (custom) attributes
*/ */
function checkField(){ function checkField(){
field = $(this);
// skip testing fields whom their type is not HIDDEN but they are HIDDEN via CSS. // skip testing fields whom their type is not HIDDEN but they are HIDDEN via CSS.
if( field[0].type !='hidden' && field.is(':hidden') ) if( this.type !='hidden' && $(this).is(':hidden') )
return true; return true;
field.data( 'valid',true ); // every field starts as 'valid=true' until proven otherwise prepareFieldData(this);
field.data( 'type', field.attr('type') ); // every field starts as 'valid=true' until proven otherwise
field.data( 'val', field[0].value.replace(/^\s+|\s+$/g, "") ); // cache the value of the field and trim it field.data( 'val', field[0].value.replace(/^\s+|\s+$/g, "") ); // cache the value of the field and trim it
data = field.data(); // cache the custom data attributes. first removes the DATA because jQuery has an data = field.data();
var v = data.val;
// Check if there is a specific error message for that field, if not, use the default 'invalid' message // Check if there is a specific error message for that field, if not, use the default 'invalid' message
alertTxt = message[field.prop('name')] || message.invalid; alertTxt = message[field.prop('name')] || message.invalid;
// SELECT / TEXTAREA nodes needs special treatment // Special treatment
if( field[0].nodeName.toLowerCase() === "select" ){ if( field[0].nodeName.toLowerCase() === "select" ){
data.type = 'select'; data.type = 'select';
} }
if( field[0].nodeName.toLowerCase() === "textarea" ){ else if( field[0].nodeName.toLowerCase() === "textarea" ){
data.type = 'text'; data.type = 'text';
} }
/* Gather Custom data attributes for specific validation: /* Gather Custom data attributes for specific validation:
@ -277,59 +327,42 @@ var validator = (function(){
validateWords = data['validateWords'] || 0; validateWords = data['validateWords'] || 0;
lengthRange = data['validateLengthRange'] ? (data['validateLengthRange']+'').split(',') : [1]; lengthRange = data['validateLengthRange'] ? (data['validateLengthRange']+'').split(',') : [1];
lengthLimit = data['validateLength'] ? (data['validateLength']+'').split(',') : false; lengthLimit = data['validateLength'] ? (data['validateLength']+'').split(',') : false;
minmax = data['validateMinmax'] ? (data['validateMinmax']+'').split(',') : ''; // for type 'number', defines the mininum and/or maximum for the value as a number. minmax = data['validateMinmax'] ? (data['validateMinmax']+'').split(',') : ''; // for type 'number', defines the minimum and/or maximum for the value as a number.
pattern = data['validatePattern'];
data.valid = tests.hasValue(data.val);
if( field.hasClass('optional') && !data.valid )
data.valid = true;
// for checkboxes
if( field[0].type === "checkbox" ){
data.valid = field[0].checked;
alertTxt = message.checked;
}
// check if field has any value
else if( data.valid ){
/* Validate the field's value is different than the placeholder attribute (and attribute exists) /* Validate the field's value is different than the placeholder attribute (and attribute exists)
* this is needed when fixing the placeholders for older browsers which does not support them. * this is needed when fixing the placeholders for older browsers which does not support them.
* in this case, make sure the "placeholder" jQuery plugin was even used before procceding * in this case, make sure the "placeholder" jQuery plugin was even used before proceeding
*/ */
if( tests.sameAsPlaceholder(field) ){ if( tests.sameAsPlaceholder(field) ){
alertTxt = msg.form.empty; alertTxt = message.empty;
data.valid = false; data.valid = false;
} }
// if this field is linked to another field (their values should be the same) // if this field is linked to another field (their values should be the same)
if( data.validateLinked ){ if( data.validateLinked ){
var linkedTo = data['validateLinked'].indexOf('#') == 0 ? $(data['validateLinked']) : $(':input[name=' + data['validateLinked'] + ']'); var linkedTo = data['validateLinked'].indexOf('#') == 0 ? $(data['validateLinked']) : $(':input[name=' + data['validateLinked'] + ']');
data.valid = tests.linked( v, linkedTo.val() ); data.valid = tests.linked( data.val, linkedTo.val() );
} }
/* validate by type of field. use 'attr()' is preffered to get the actual value and not what the browsers sees for unsupported types. /* validate by type of field. use 'attr()' is proffered to get the actual value and not what the browsers sees for unsupported types.
*/ */
if( data.valid && (data.valid = tests.hasValue(v)) || data.type == 'select' ) else if( data.valid || data.type == 'select' )
switch( data.type ){ data.valid = testByType(data.type, data.val);
case 'email' :
data.valid = tests.email(v);
break;
case 'text' :
data.valid = tests.text(v);
break;
case 'tel' :
pattern = pattern || 'phone';
data.valid = tests.text(v);
break;
case 'password' :
data.valid = tests.text(v);
break;
case 'number' :
data.valid = tests.number(v);
break;
case 'date' :
data.valid = tests.date(v);
break;
case 'url' :
data.valid = tests.url(v);
break;
case 'select' :
data.valid = tests.select(v);
break;
case 'hidden' :
data.valid = tests.hidden(v);
break;
}
if( field.hasClass('optional') && !data.val ) }
data.valid = true;
// mark / unmark the field, and set the general 'submit' flag accordingly // mark / unmark the field, and set the general 'submit' flag accordingly
if( data.valid ) if( data.valid )
@ -345,6 +378,8 @@ var validator = (function(){
/* vaildates all the REQUIRED fields prior to submiting the form /* vaildates all the REQUIRED fields prior to submiting the form
*/ */
function checkAll( $form ){ function checkAll( $form ){
$form = $($form);
if( $form.length == 0 ){ if( $form.length == 0 ){
console.warn('element not found'); console.warn('element not found');
return false; return false;
@ -352,6 +387,7 @@ var validator = (function(){
var that = this, var that = this,
submit = true, // save the scope submit = true, // save the scope
// get all the input/textareas/select fields which are required or optional (meaning, they need validation only if they were filled)
fieldsToCheck = $form.find(':input').filter('[required=required], .required, .optional').not('[disabled=disabled]'); fieldsToCheck = $form.find(':input').filter('[required=required], .required, .optional').not('[disabled=disabled]');
fieldsToCheck.each(function(){ fieldsToCheck.each(function(){
@ -365,10 +401,11 @@ var validator = (function(){
return { return {
defaults : defaults, defaults : defaults,
checkField : checkField, checkField : checkField,
keypress : keypress,
checkAll : checkAll, checkAll : checkAll,
mark : mark, mark : mark,
unmark : unmark, unmark : unmark,
message : message, message : message,
tests : tests tests : tests
} }
})(); })(jQuery);

6
vendors/validator/validator.min.js vendored
View File

File diff suppressed because one or more lines are too long