maxmustermann/gentelella
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Merge pull request #195 from christianesperar/master

Browse source 
Fix TypeError on form validation page
This commit is contained in:
Christian Esperar 2016-06-07 23:59:04 +08:00
parent 6f8ff7ecbd fed9bbbf8b
commit 5bfe56e318
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 -->
<script src="../vendors/nprogress/nprogress.js"></script>
<!-- validator -->
<script src="../vendors/validator/validator.min.js"></script>
<script src="../vendors/validator/validator.js"></script>
<!-- Custom Theme Scripts -->
<script src="../build/js/custom.min.js"></script>

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

@ -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",

84
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.
[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 – `<input type='foo' name
* Number
* Date
* URL
* Search
* File
* Tel
* Checkbox
* Hidden – Hidden fields can also have the ‘required’ attribute
The below form elements are also supported:
@ -41,7 +44,7 @@ The below form elements are also supported:
<div class="item">
<label>
<span>Name</span>
<input data-validate-lengthRange="6" data-validate-words="2" name="name" placeholder="ex. John f. Kennedy" required="required" type="text" />
<input data-validate-lengthRange="6" data-validate-words="2" name="name" placeholder="ex. John f. Kennedy" required="required" type="text" />
</label>
<div class='tooltip help'>
<span>?</span>
@ -57,7 +60,7 @@ The below form elements are also supported:
<input name="email" required="required" type="email" />
</label>
</div>
...
...
### 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:<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
@ -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 **&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

53
vendors/validator/fv.css vendored
View file

@ -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; }

65
vendors/validator/validator.html → vendors/validator/index.html vendored
View file

@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<title>Total Form Validation</title>
<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="stylesheet" href="fv.css" type="text/css" />
<!--[if IE]>
<style>
@ -12,6 +13,7 @@
<![endif]-->
</head>
<body>
<a class='btn github' href='https://github.com/yairEO/validator'>Github</a>
<div id='wrap'>
<div class='options'>
<label>
@ -30,7 +32,7 @@
<div class="item">
<label>
<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>
<div class='tooltip help'>
<span>?</span>
@ -54,6 +56,20 @@
</div>
<span class='extra'>(optional)</span>
</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">
<label>
<span>email</span>
@ -69,7 +85,7 @@
<div class="item">
<label>
<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>
<div class='tooltip help'>
<span>?</span>
@ -141,6 +157,14 @@
<input name="url" placeholder="http://www.website.com" required="required" type="url" />
</label>
</div>
<div class="item">
<label>
<span>Checkboxes</span>
<label><input required="required" type="checkbox" />I agree</label>
</label>
</div>
<div class="item multi required">
<label for='multi_first'>
<span>Multifield</span>
@ -162,6 +186,12 @@
</div>
</div>
</div>
<div class="item">
<label>
<span>File upload</span>
<input type='file' required>
</label>
</div>
<div class="item">
<label>
<span>message</span>
@ -174,43 +204,50 @@
<input name="somethingHidden" required="required" type="text" style='display:none' />
</fieldset>
<button id='send' type='submit'>Submit</button>
</form>
</form>
</section>
</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="validator.js"></script>
<script>
// initialize the validator function
validator.message['date'] = 'not a real date';
// 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)
.on('change', 'select.required', validator.checkField);;
$('.multi.required').on('keyup', 'input', function(){
validator.checkField.apply($(this).siblings().last()[0]);
});
$('form')
.on('blur', 'input[required], input.optional, select.required', validator.checkField)
.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] );
});
// bind the validation to the form submit event
//$('#send').click('submit');//.prop('disabled', true);
$('form').submit(function(e){
e.preventDefault();
var submit = true;
// evaluate the form using generic validaing
// Validate the form using generic validaing
if( !validator.checkAll( $(this) ) ){
submit = false;
}
if( submit )
this.submit();
return false;
});
/* FOR DEMO ONLY */
$('#vfields').change(function(){
$('form').toggleClass('mode2');
}).prop('checked',false);
$('#alerts').change(function(){
validator.defaults.alerts = (this.checked) ? false : true;
if( this.checked )

72
vendors/validator/multifield.js vendored
View file

@ -1,25 +1,43 @@
var multifeild = {
keypress : function(e){
var nextPrevField;
// Ignore: [tab, left & right arrows]
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();
// multifield - connects several input fields to each-other
// By Yair Even Or / 2011 / dropthebit.com
;(function(){
var fixedEvent = 0;
function funnel(e){
fixedEvent++;
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( this.value.length == this.maxLength && e.keyCode != 8 )
nextPrevField = $(this).next();
// set the caret at the END of the inupt element at hand
if( nextPrevField )
setCaret( nextPrevField[0], 100);
else if( e.charCode && sel[1] == sel[0] && sel[0] == this.maxLength )
setCaret( $(this).next(':text')[0], 100);
function setCaret(input, pos){
if (input.setSelectionRange) {
if( !input ) return;
if (input.setSelectionRange){
input.focus();
input.setSelectionRange(pos, pos);
} else if (input.createTextRange) {
}
else if( input.createTextRange ){
var range = input.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
@ -27,14 +45,16 @@ var multifeild = {
range.select();
}
}
},
combine.apply(this);
};
// After each 'change' event of any of the fields, combine all the values to the hidden input.
combine : function(e){
var hidden = $(this).siblings('input[type=hidden]').val('');
$(this).siblings('input[type="text"]').andSelf().each( function(){
hidden[0].value += this.value;
});
function combine(){
var hidden = $(this).siblings('input[type=hidden]').val('')[0];
$(this.parentNode).find(':text').each( function(){
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');
})();

755
vendors/validator/validator.js vendored
View file

@ -1,374 +1,411 @@
/*
Validator v1.0.5
(c) 2012 Yair Even Or <http://dropthebit.com>
MIT-style license.
Validator v1.1.0
(c) Yair Even Or
https://github.com/yairEO/validator
MIT-style license.
*/
var validator = (function(){
var message, tests, checkField, validate, mark, unmark, field, minmax, defaults,
validateWords, lengthRange, lengthLimit, pattern, alertTxt, data,
email_illegalChars = /[\(\)\<\>\,\;\:\\\/\"\[\]]/,
email_filter = /^.+@.+\..{2,3}$/;
var validator = (function($){
var message, tests, checkField, validate, mark, unmark, field, minmax, defaults,
validateWords, lengthRange, lengthLimit, pattern, alertTxt, data,
email_illegalChars = /[\(\)\<\>\,\;\:\\\/\"\[\]]/,
email_filter = /^.+@.+\..{2,6}$/; // exmaple email "steve@s-i.photo"
/* general text messages
*/
message = {
invalid : 'invalid input',
empty : 'please put something here',
min : 'input is too short',
max : 'input is too long',
number_min : 'too low',
number_max : 'too high',
url : 'invalid URL',
number : 'not a number',
email : 'email address is invalid',
email_repeat : 'emails do not match',
password_repeat : 'passwords do not match',
repeat : 'no match',
complete : 'input is not complete',
select : 'Please select an option'
};
// defaults
defaults = { alerts:true };
/* Tests for each type of field (including Select element)
*/
tests = {
sameAsPlaceholder : function(a){
return $.fn.placeholder && a.attr('placeholder') !== undefined && data.val == a.prop('placeholder');
},
hasValue : function(a){
if( !a ){
alertTxt = message.empty;
return false;
}
return true;
},
// '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){
if( b != a ){
alertTxt = message[data.type + '_repeat'] || message.no_match;
return false;
}
return true;
},
email : function(a){
if ( !email_filter.test( a ) || a.match( email_illegalChars ) ){
alertTxt = a ? message.email : message.empty;
return false;
}
return true;
},
text : function(a){
// 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
if( validateWords ){
var words = a.split(' ');
// iterrate on all the words
var wordsLength = function(len){
for( var w = words.length; w--; )
if( words[w].length < len )
return false;
return true;
};
if( words.length < validateWords || !wordsLength(2) ){
alertTxt = message.complete;
return false;
}
return true;
}
if( a.length < lengthRange[0] ){
alertTxt = message.min;
return false;
}
// check if there is max length & field length is greater than the allowed
if( lengthRange[1] && a.length > lengthRange[1] ){
alertTxt = message.max;
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
if( lengthLimit.length ){
var obeyLimit = false;
while( lengthLimit.length ){
if( lengthLimit.pop() == a.length )
obeyLimit = true;
}
if( !obeyLimit ){
alertTxt = message.complete;
return false;
}
}
if( pattern ){
var regex;
switch( pattern ){
case 'alphanumeric' :
regex = /^[a-z0-9]+$/i;
break;
case 'numeric' :
regex = /^[0-9]+$/i;
break;
case 'phone' :
regex = /^\+?([0-9]|[-|' '])+$/i;
break;
default :
regex = pattern;
}
try{
if( regex && !eval(regex).test(a) )
return false;
}
catch(err){
console.log(err, field, 'regex is invalid');
return false;
}
}
return true;
},
number : function(a){
// if not not a number
if( isNaN(parseFloat(a)) && !isFinite(a) ){
alertTxt = message.number;
return false;
}
// not enough numbers
else if( a.length < lengthRange[0] ){
alertTxt = message.min;
return false;
}
// check if there is max length & field length is greater than the allowed
else if( lengthRange[1] && a.length > lengthRange[1] ){
alertTxt = message.max;
return false;
}
else if( minmax[0] && (a|0) < minmax[0] ){
alertTxt = message.number_min;
return false;
}
else if( minmax[1] && (a|0) > minmax[1] ){
alertTxt = message.number_max;
return false;
}
return true;
},
// Date is validated in European format (day,month,year)
date : function(a){
var day, A = a.split(/[-./]/g), i;
// if there is native HTML5 support:
if( field[0].valueAsNumber )
return true;
/* general text messages
*/
message = {
invalid : 'invalid input',
checked : 'must be checked',
empty : 'please put something here',
min : 'input is too short',
max : 'input is too long',
number_min : 'too low',
number_max : 'too high',
url : 'invalid URL',
number : 'not a number',
email : 'email address is invalid',
email_repeat : 'emails do not match',
password_repeat : 'passwords do not match',
repeat : 'no match',
complete : 'input is not complete',
select : 'Please select an option'
};
for( i = A.length; i--; ){
if( isNaN(parseFloat(a)) && !isFinite(a) )
return false;
}
try{
day = new Date(A[2], A[1]-1, A[0]);
if( day.getMonth()+1 == A[1] && day.getDate() == A[0] )
return day;
return false;
}
catch(er){
console.log('date test: ', err);
return false;
}
},
url : function(a){
// minimalistic URL validation
function testUrl(url){
return /^(https?:\/\/)?([\w\d\-_]+\.+[A-Za-z]{2,})+\/?/.test( url );
}
if( !testUrl( a ) ){
console.log(a);
alertTxt = a ? message.url : message.empty;
return false;
}
return true;
},
hidden : function(a){
if( a.length < lengthRange[0] ){
alertTxt = message.min;
return false;
}
if( pattern ){
var regex;
if( pattern == 'alphanumeric' ){
regex = /^[a-z0-9]+$/i;
if( !regex.test(a) ){
return false;
}
}
}
return true;
},
select : function(a){
if( !tests.hasValue(a) ){
alertTxt = message.select;
return false;
}
return true;
}
};
/* marks invalid fields
*/
mark = function(field, text){
if( !text || !field || !field.length )
return false;
// 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
var item = field.parents('.item'), warning;
item.find('.alert').remove();
if( defaults.alerts ){
warning = $('<div>').addClass('alert').text( text );
if(!window.console){
console={};
console.log=console.warn=function(){ return; }
}
// defaults
defaults = {
alerts : true,
classes : {
item : 'item',
alert : 'alert',
bad : 'bad'
}
};
/* Tests for each type of field (including Select element)
*/
tests = {
sameAsPlaceholder : function(a){
return $.fn.placeholder && a.attr('placeholder') !== undefined && data.val == a.prop('placeholder');
},
hasValue : function(a){
if( !a ){
alertTxt = message.empty;
return false;
}
return true;
},
// '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){
if( b != a ){
// choose a specific message or a general one
alertTxt = message[data.type + '_repeat'] || message.no_match;
return false;
}
return true;
},
email : function(a){
if ( !email_filter.test( a ) || a.match( email_illegalChars ) ){
alertTxt = a ? message.email : message.empty;
return false;
}
return true;
},
// 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.
// for example 'john F kenedy' should be at least 2 words and will pass validation
if( validateWords ){
var words = a.split(' ');
// iterrate on all the words
var wordsLength = function(len){
for( var w = words.length; w--; )
if( words[w].length < len )
return false;
return true;
};
if( words.length < validateWords || !wordsLength(2) ){
alertTxt = message.complete;
return false;
}
return true;
}
if( !skip && lengthRange && a.length < lengthRange[0] ){
alertTxt = message.min;
return false;
}
// check if there is max length & field length is greater than the allowed
if( lengthRange && lengthRange[1] && a.length > lengthRange[1] ){
alertTxt = message.max;
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
if( lengthLimit && lengthLimit.length ){
while( lengthLimit.length ){
if( lengthLimit.pop() == a.length ){
alertTxt = message.complete;
return false;
}
}
}
if( pattern ){
var regex, jsRegex;
switch( pattern ){
case 'alphanumeric' :
regex = /^[a-zA-Z0-9]+$/i;
break;
case 'numeric' :
regex = /^[0-9]+$/i;
break;
case 'phone' :
regex = /^\+?([0-9]|[-|' '])+$/i;
break;
default :
regex = pattern;
}
try{
jsRegex = new RegExp(regex).test(a);
if( a && !jsRegex )
return false;
}
catch(err){
console.log(err, field, 'regex is invalid');
return false;
}
}
return true;
},
number : function(a){
// if not not a number
if( isNaN(parseFloat(a)) && !isFinite(a) ){
alertTxt = message.number;
return false;
}
// not enough numbers
else if( lengthRange && a.length < lengthRange[0] ){
alertTxt = message.min;
return false;
}
// check if there is max length & field length is greater than the allowed
else if( lengthRange && lengthRange[1] && a.length > lengthRange[1] ){
alertTxt = message.max;
return false;
}
else if( minmax[0] && (a|0) < minmax[0] ){
alertTxt = message.number_min;
return false;
}
else if( minmax[1] && (a|0) > minmax[1] ){
alertTxt = message.number_max;
return false;
}
return true;
},
// Date is validated in European format (day,month,year)
date : function(a){
var day, A = a.split(/[-./]/g), i;
// if there is native HTML5 support:
if( field[0].valueAsNumber )
return true;
for( i = A.length; i--; ){
if( isNaN(parseFloat(a)) && !isFinite(a) )
return false;
}
try{
day = new Date(A[2], A[1]-1, A[0]);
if( day.getMonth()+1 == A[1] && day.getDate() == A[0] )
return day;
return false;
}
catch(er){
console.log('date test: ', err);
return false;
}
},
url : function(a){
// minimalistic URL validation
function testUrl(url){
return /^(https?:\/\/)?([\w\d\-_]+\.+[A-Za-z]{2,})+\/?/.test( url );
}
if( !testUrl( a ) ){
alertTxt = a ? message.url : message.empty;
return false;
}
return true;
},
hidden : function(a){
if( lengthRange && a.length < lengthRange[0] ){
alertTxt = message.min;
return false;
}
if( pattern ){
var regex;
if( pattern == 'alphanumeric' ){
regex = /^[a-z0-9]+$/i;
if( !regex.test(a) ){
return false;
}
}
}
return true;
},
select : function(a){
if( !tests.hasValue(a) ){
alertTxt = message.select;
return false;
}
return true;
}
};
/* marks invalid fields
*/
mark = function( field, text ){
if( !text || !field || !field.length )
return false;
// 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
var item = field.closest('.' + defaults.classes.item),
warning;
if( item.hasClass(defaults.classes.bad) ){
if( defaults.alerts )
item.find('.'+defaults.classes.alert).html(text);
}
else if( defaults.alerts ){
warning = $('<div class="'+ defaults.classes.alert +'">').html( text );
item.append( warning );
}
item.removeClass('bad');
item.removeClass(defaults.classes.bad);
// a delay so the "alert" could be transitioned via CSS
setTimeout(function(){
item.addClass('bad');
item.addClass(defaults.classes.bad);
}, 0);
};
/* un-marks invalid fields
*/
unmark = function(field){
if( !field || !field.length ){
console.warn('no "field" argument, null or DOM object not found')
return false;
}
field.parents('.item')
.removeClass('bad')
.find('.alert').animate({ marginLeft:32, opacity:0 }, 200, function(){
$(this).remove();
});
};
/* Checks a single form field by it's type and specific (custom) attributes
*/
function checkField(){
field = $(this);
// skip testing fields whom their type is not HIDDEN but they are HIDDEN via CSS.
if( field[0].type !='hidden' && field.is(':hidden') )
return true;
};
/* un-marks invalid fields
*/
unmark = function( field ){
if( !field || !field.length ){
console.warn('no "field" argument, null or DOM object not found');
return false;
}
field.data( 'valid',true ); // every field starts as 'valid=true' until proven otherwise
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
data = field.data(); // cache the custom data attributes. first removes the DATA because jQuery has an
var v = data.val;
// 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;
// SELECT / TEXTAREA nodes needs special treatment
if( field[0].nodeName.toLowerCase() === "select" ){
data.type = 'select';
}
if( field[0].nodeName.toLowerCase() === "textarea" ){
data.type = 'text';
}
/* Gather Custom data attributes for specific validation:
*/
validateWords = data['validateWords'] || 0;
lengthRange = data['validateLengthRange'] ? (data['validateLengthRange']+'').split(',') : [1];
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.
pattern = data['validatePattern'];
field.closest('.' + defaults.classes.item)
.removeClass(defaults.classes.bad)
.find('.'+ defaults.classes.alert).remove();
};
/* 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.
* in this case, make sure the "placeholder" jQuery plugin was even used before procceding
*/
if( tests.sameAsPlaceholder(field) ){
alertTxt = msg.form.empty;
data.valid = false;
}
function testByType(type, value){
if( type == 'tel' )
pattern = pattern || 'phone';
// if this field is linked to another field (their values should be the same)
if( data.validateLinked ){
var linkedTo = data['validateLinked'].indexOf('#') == 0 ? $(data['validateLinked']) : $(':input[name=' + data['validateLinked'] + ']');
data.valid = tests.linked( v, 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.
*/
if( data.valid && (data.valid = tests.hasValue(v)) || data.type == 'select' )
switch( data.type ){
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( !type || type == 'password' || type == 'tel' || type == 'search' || type == 'file' )
type = 'text';
if( field.hasClass('optional') && !data.val )
data.valid = true;
// mark / unmark the field, and set the general 'submit' flag accordingly
if( data.valid )
unmark( field );
else{
mark( field, alertTxt );
submit = false;
}
return data.valid;
}
/* vaildates all the REQUIRED fields prior to submiting the form
*/
function checkAll( $form ){
if( $form.length == 0 ){
console.warn('element not found');
return false;
}
var that = this,
submit = true, // save the scope
fieldsToCheck = $form.find(':input').filter('[required=required], .required, .optional').not('[disabled=disabled]');
return tests[type] ? tests[type](value, true) : true;
}
fieldsToCheck.each(function(){
// use an AND operation, so if any of the fields returns 'false' then the submitted result will be also FALSE
submit = submit * checkField.apply(this);
});
return !!submit; // casting the variable to make sure it's a boolean
}
return {
defaults : defaults,
checkField : checkField,
checkAll : checkAll,
mark : mark,
unmark : unmark,
message : message,
tests : tests
}
})();
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
*/
function checkField(){
// skip testing fields whom their type is not HIDDEN but they are HIDDEN via CSS.
if( this.type !='hidden' && $(this).is(':hidden') )
return true;
prepareFieldData(this);
field.data( 'val', field[0].value.replace(/^\s+|\s+$/g, "") ); // cache the value of the field and trim it
data = field.data();
// 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;
// Special treatment
if( field[0].nodeName.toLowerCase() === "select" ){
data.type = 'select';
}
else if( field[0].nodeName.toLowerCase() === "textarea" ){
data.type = 'text';
}
/* Gather Custom data attributes for specific validation:
*/
validateWords = data['validateWords'] || 0;
lengthRange = data['validateLengthRange'] ? (data['validateLengthRange']+'').split(',') : [1];
lengthLimit = data['validateLength'] ? (data['validateLength']+'').split(',') : false;
minmax = data['validateMinmax'] ? (data['validateMinmax']+'').split(',') : ''; // for type 'number', defines the minimum and/or maximum for the value as a number.
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)
* 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 proceeding
*/
if( tests.sameAsPlaceholder(field) ){
alertTxt = message.empty;
data.valid = false;
}
// if this field is linked to another field (their values should be the same)
if( data.validateLinked ){
var linkedTo = data['validateLinked'].indexOf('#') == 0 ? $(data['validateLinked']) : $(':input[name=' + data['validateLinked'] + ']');
data.valid = tests.linked( data.val, linkedTo.val() );
}
/* validate by type of field. use 'attr()' is proffered to get the actual value and not what the browsers sees for unsupported types.
*/
else if( data.valid || data.type == 'select' )
data.valid = testByType(data.type, data.val);
}
// mark / unmark the field, and set the general 'submit' flag accordingly
if( data.valid )
unmark( field );
else{
mark( field, alertTxt );
submit = false;
}
return data.valid;
}
/* vaildates all the REQUIRED fields prior to submiting the form
*/
function checkAll( $form ){
$form = $($form);
if( $form.length == 0 ){
console.warn('element not found');
return false;
}
var that = this,
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.each(function(){
// use an AND operation, so if any of the fields returns 'false' then the submitted result will be also FALSE
submit = submit * checkField.apply(this);
});
return !!submit; // casting the variable to make sure it's a boolean
}
return {
defaults : defaults,
checkField : checkField,
keypress : keypress,
checkAll : checkAll,
mark : mark,
unmark : unmark,
message : message,
tests : tests
}
})(jQuery);

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

File diff suppressed because one or more lines are too long