Skip to content

G
gentelella

吃冰棍不. / gentelella
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 1
Fork 0
G
gentelella

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 4fb515d0 编写于 作者: P pratik
浏览文件
操作

upgraded validator plug-in

上级 f0106934
展开全部 隐藏空白更改
内联 并排
Showing with 1256 addition and 6928 deletion
bower.json
浏览文件 @ 4fb515d0
......@@ -50,7 +50,7 @@
"jquery.inputmask": "^3.3.1",
"jquery-knob": "^1.2.13",
"cropper": "^2.3.0",
"validator": "https://github.com/yairEO/validator.git#^1.0.6",
"validator": "https://github.com/yairEO/validator.git#^3.3.5",
"jQuery-Smart-Wizard": "^3.3.1",
"dropzone": "^4.3.0",
"pnotify": "^3.0.0",
......
package-lock.json 已删除 100644 → 0
浏览文件 @ f0106934
此差异已折叠。
production/form_validation.html
浏览文件 @ 4fb515d0
此差异已折叠。
production/tables_dynamic.html
浏览文件 @ 4fb515d0
此差异已折叠。
vendors/validator/.bower.json
浏览文件 @ 4fb515d0
{
"name": "validator",
"homepage": "https://github.com/yairEO/validator",
"version": "1.1.0",
"_release": "1.1.0",
"version": "3.3.5",
"_release": "3.3.5",
"_resolution": {
"type": "version",
"tag": "1.1.0",
"commit": "f855eb37c626f2ad712583d25afdd30147a40d8e"
"tag": "3.3.5",
"commit": "01a570d68fa748f87a6a90166f157a64225e9e4d"
},
"_source": "https://github.com/yairEO/validator.git",
"_target": "^1.0.6",
"_target": "^3.3.5",
"_originalSource": "https://github.com/yairEO/validator.git"
}
\ No newline at end of file
vendors/validator/.gitignore
浏览文件 @ 4fb515d0
......@@ -161,3 +161,4 @@ pip-log.txt
# Mac crap
.DS_Store
/.npmrc
vendors/validator/README.md
浏览文件 @ 4fb515d0
validator
=========
The javascript validation code is based on jQuery. The Validator is cross-browser and will give you the power to use future-proof input types such as ‘tel’, ‘email’, ‘number’, ‘date’, and ‘url’. I can sum this as a ‘template’ for creating web forms.
The Validator is cross-browser and will give you the power to use future-proof input types such as
`tel`, `email`, `number`, `date`, `time`, `checkbox` and `url`.
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://yaireo.github.io/validator)
# [DEMO PAGE](http://yaireo.github.io/validator)
### Why should you use this?
......@@ -12,7 +12,7 @@ In the semantic point-of-view, I believe that this method is very clean and…ap
* Deals with all sorts of edge cases
* Utilize new HTML5 types for unsupported browsers
* Flexible error messaging system
* Light-weight (10kb + comments)
* Light-weight (19kb + comments, unminified)
## Validation types support
HTML5 offers a wide selection of input types. I saw no need to support them all, for example, a checkbox should not be validated as ‘required’ because why wouldn’t it be checked in the first place when the form is rendered?
......@@ -25,26 +25,24 @@ These input types can be validated by the the JS for – `<input type='foo' name
* Password
* Number
* Date
* Time
* URL
* Search
* File
* Tel
* Checkbox
* Hidden – Hidden fields can also have the ‘required’ attribute
The below form elements are also supported:
* Select – Useing a ‘required’ class because there is no such attribute for ‘select’ element
* Select
* Textarea
* Hidden – Hidden fields can also have the ‘required’ attribute
## Basic semantics
<form action="" method="post" novalidate>
<fieldset>
<div class="item">
<div class="field">
<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-length-range="6" data-validate-words="2" name="name" placeholder="ex. John f. Kennedy" required="required" type="text" />
</label>
<div class='tooltip help'>
<span>?</span>
......@@ -54,7 +52,7 @@ The below form elements are also supported:
</div>
</div>
</div>
<div class="item">
<div class="field">
<label>
<span>email</span>
<input name="email" required="required" type="email" />
......@@ -64,8 +62,8 @@ The below form elements are also supported:
### Explaining the DOM
First, obviously, there is a Form element with the novalidate attribute to make sure to disable the native HTML5 validations (which currently suck). proceeding it there is a Fieldset element which is not a must, but acts as a “binding” box for a group of fields that are under the same “category”. For bigger forms there are many times field groups that are visually separated from each other for example. Now, we treat every form field element the user interacts with, whatsoever, as an “item”, and therefor these “items” will be wraped with `<div class='item'>`. This isolation gives great powers.
Next, inside an item, there will typically be an input or select or something of the sort, so they are put inside a `<label>` element, to get rid of the (annoying) for attribute, on the label (which also require us to give an ID to the form field element), and now when a user clicks on the label, the field will get focused. great. Going back to the label’s text itself, we wrap it with a `<span>` to have control over it’s style.
First, obviously, there is a Form element with the novalidate attribute to make sure to disable the native HTML5 validations (which currently suck). proceeding it there is a Fieldset element which is not a must, but acts as a “binding” box for a group of fields that are under the same “category”. For bigger forms there are many times field groups that are visually separated from each other for example. Now, we treat every form field element the user interacts with, whatsoever, as an “field”, and therefor these “fields” will be wraped with `<div class='field'>`. This isolation gives great powers.
Next, inside an field, there will typically be an input or select or something of the sort, so they are put inside a `<label>` element, to get rid of the (annoying) for attribute, on the label (which also require us to give an ID to the form field element), and now when a user clicks on the label, the field will get focused. great. Going back to the label’s text itself, we wrap it with a `<span>` to have control over it’s style.
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.
......@@ -77,83 +75,134 @@ The whole approach here is to define each form field (input, select, whatever) a
| 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-linked | Defines the field which the current field’s value (the attribute is set on) should be compared to. Value can be a selector or another input's `name` attribute's value |
| data-validate-minmax | For type `number` only. Defines the minimum and/or maximum value that can be in that field |
### Optional fields
There is also support for optional fields, which are not validated, unless they have a value. The support for this feature is done by adding a class “optional” to a form element. Note that this should not be done along side the “required” attribute.
There is also support for optional fields, which are not validated, unless they have a value. The support for this feature is done by adding a class `optional` to a form element. Note that this should not be done along side the “required” attribute.
## 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.
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'
};
This is the object which holds all the texts used by the form validator:
{
invalid : 'inupt is not as expected',
short : 'input is too short',
long : 'input is too long',
checked : 'must be checked',
empty : 'please put something here',
select : 'Please select an option',
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',
date : 'invalid date',
time : 'invalid time',
password_repeat : 'passwords do not match',
no_match : 'no match',
complete : 'input is not complete'
}
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;`
// set custom text on initialization:
var validator = new FormValidator({
texts : {
date:'not a real date'
}
});
// or post-initialization
var validator = new FormValidator();
validator.texts.date = 'not a real date';
Error messages (per field) can be disabled:
validator = new FormValidator({
alerts:false
});
// or by:
var validator = new FormValidator();
validator.settings.alerts = false;
## Binding the validation to a form
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 two 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).
### Usage example - validate on submit
A generic callback function to have the form validated on the **Submit** event. You can also include your own personal validations before the **checkAll()** call.
###Usage example - validate on submit
var validator = new FormValidator();
// select your "form" element from the DOM and attach an "onsubmit" event handler to it:
document.forms[0].onsubmit = function(e){
var validatorResult = validator.checkAll(this);
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.
return !!validatorResult.valid;
};
### Usage example - validate on field blur/input/change events
Check every field (using event Capture)
var validator = new FormValidator();
document.forms[0].addEventListener('blur', function(e){
validator.checkField(e.target)
}, true);
document.forms[0].addEventListener('input', function(e){
validator.checkField(e.target);
}, true);
document.forms[0].addEventListener('change', function(e){
validator.checkField(e.target)
}, true);
$('form').submit(function(e){
e.preventDefault();
var submit = true;
// you can put your own custom validations below
Utilize the internal events' binding system; pass in the settings the `events` property and assign it an array which states which events should be inputs be validated for. For a single events, a string may be paassed instead of an Array:
// check all the rerquired fields
if( !validator.checkAll( $(this) ) )
submit = false;
var validator = new FormValidator( document.forms[0], {
"events" : ['blur', 'input', 'change'] // for a single one, just pass a string, ex: "blur"
});
if( submit )
this.submit();
In case the form is not yet ready, the events maybe be binded later, when the form is ready, using the internal `events` method for a `validator` instance:
return false;
})
// validate fields on these events:
###Usage example - validate on field blur event (out of focus)
Check every field once it looses focus (onBlur) event
var validator = new FormValidator(document.forms[0]); // the "<form>" element should be passed when the instance is created or passed to the "events" method below (as the 2nd parameter)
$('form').on('blur', 'input[required]', validator.checkField);
// wait for the form, or its' fields, to be ready (for whatever reason), and then bind the events as follows:
validator.events(['blur', 'input', 'change']);
## 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.
## Tooltips (for each field which did not validate)
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 “field” is about or for example, what the allowed input format is.
## Classes
`validator.defaults.classes` object can be modified with these classes:
`validator.settings.classes` object can be modified:
var validatorClasses = {
field : 'field', // class for each input wrapper
alert : 'alert', // call on the alert tooltip
bad : 'bad' // classes for bad input
};
validator = new FormValidator(null, {classes:validatorClasses});
// or
validator = new FormValidator();
validator.settings.classes.bad = 'error';
item : 'item', // class for each input wrapper
alert : 'alert', // call on the alert tooltip
bad : 'bad' // classes for bad input
## Bonos – multifields
## Bonus – multifields
I have a cool feature I wrote which I call “multifields”. These are fields which are often use as to input a credit card or a serial number, and are actually a bunch of input fields which are “connected” to each other, and treated as one. You can see it in the demo page, and it’s included in ‘multifield.js’ file.
\ No newline at end of file
vendors/validator/fv.css
浏览文件 @ 4fb515d0
......@@ -44,23 +44,23 @@ 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]{ 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{ 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: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; }
.item .tooltip:hover .content{ opacity:1; left:36px; }
.item .tooltip .content b{ height:0; width:0; border-color:#333 #333 transparent transparent; border-style:solid; border-width:9px 7px; position:absolute; left:-14px; top:8px; }
.item .tooltip.down .content b{ left:auto; right:6px; top:-10px; border-width:5px; border-color:transparent #333 #333 transparent; }
.field .tooltip{ float:left; top:2px; left:7px; position:relative; z-index:2; }
.field .tooltip:hover{ z-index:3; }
.field .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; }
.field .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); }
.field .tooltip p{ padding:0; }
.field .tooltip.down .content{ left:auto; right:0; top:30px; }
.field .tooltip:hover .content{ opacity:1; left:36px; }
.field .tooltip .content b{ height:0; width:0; border-color:#333 #333 transparent transparent; border-style:solid; border-width:9px 7px; position:absolute; left:-14px; top:8px; }
.field .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:-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; }
.field .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; }
.field .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; }
.field.bad .alert{ left:0; opacity:1; }
@keyframes shake{
......@@ -77,47 +77,47 @@ button[type=submit]{ font-size:1.1em; padding:5px 25px; }
}
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, .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[type=checkbox]{ width:auto; }
form .field{ padding:5px 0; position:relative; height:2em; }
form .field.fields{ height:auto; }
.field label, .field .label{ cursor:pointer; }
.field label > span:first-child, .field .label{ float:left; width:160px; text-transform:capitalize; line-height:2em; }
.field input, .field textarea{ float:left; padding:3px 4px; width:210px; -webkit-transition:0.2s; -moz-transition:0.2s; transition:0.2s; }
.field 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{ }
.item select{ float:left; width:220px; padding:2px 0; margin:0; border:1px solid #CCC; text-transform:capitalize; }
.item select option{ padding:1px; }
.field input.short{ width:90px; }
.field input:focus:not([type="checkbox"]), .field textarea:focus{ box-shadow:0 0 4px #00AEEF; border:1px solid #00AEEF; }
.field textarea{ }
.field select{ float:left; width:220px; padding:2px 0; margin:0; border:1px solid #CCC; text-transform:capitalize; }
.field select option{ padding:1px; }
.item > .extra{ float:left; font-size:0.9em; color:#999; line-height:2em; margin-left:13px; }
.field > .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; }
.field.multi .input{ float:left; }
.field.multi input{ float:left; margin-right:5px; width:35px; text-align:center; }
form .field.multi input:nth-last-child(-n+2){ margin:0; }
.field.fields input{ border-top:5px solid #E1E1E1; margin:0 0 0 160px; }
.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; }
.bad textarea{ border:1px solid #CE5454; box-shadow:0 0 4px -2px #CE5454; position:relative; left:0; -moz-animation:.4s 1 shake ease; -webkit-animation:0.4s 1 shake ease; }
/* 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; }
.mode2 .item.bad{ margin-bottom:8px; }
.mode2 .item::before, .mode2 .item::after{ content:''; display:table; }
.mode2 .item::after{ clear:both; }
.mode2 .item label{ }
.mode2 .item label span{ float:none; display:block; line-height:inherit; }
.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; }
.mode2 .item.multi input{ float:left; margin-right:5px; width:35px; text-align:center; }
.mode2 .item .tooltip{ left:auto; position:absolute; right:-22px; top:19px; }
.mode2 .item .alert::after{ display:none; }
.mode2 .item .alert{ float:none; clear:left; margin:0; padding:0 5px; border-radius:0 0 3px 3px; max-width:100%; height:22px; line-height:1.8em; }
.mode2 .item > .extra{ position:absolute; right:0; }
\ No newline at end of file
.mode2 .field{ float:left; clear:left; margin-bottom:30px; height:auto; padding:0; zoom:1; }
.mode2 .field.bad{ margin-bottom:8px; }
.mode2 .field::before, .mode2 .field::after{ content:''; display:table; }
.mode2 .field::after{ clear:both; }
.mode2 .field label{ }
.mode2 .field label span{ float:none; display:block; line-height:inherit; }
.mode2 .field input:not(type="checkbox"), .field textarea{ width:250px; margin:0; }
.mode2 .field textarea{ width:350px; margin:0; }
.mode2 .field select{ width:260px; float:none; }
.mode2 .field.multi label{ float:none; }
.mode2 .field.multi input{ float:left; margin-right:5px; width:35px; text-align:center; }
.mode2 .field .tooltip{ left:auto; position:absolute; right:-22px; top:19px; }
.mode2 .field .alert::after{ display:none; }
.mode2 .field .alert{ float:none; clear:left; margin:0; padding:0 5px; border-radius:0 0 3px 3px; max-width:100%; height:22px; line-height:1.8em; }
.mode2 .field > .extra{ position:absolute; right:0; }
\ No newline at end of file
vendors/validator/index.html
浏览文件 @ 4fb515d0
......@@ -7,8 +7,8 @@
<link rel="stylesheet" href="fv.css" type="text/css" />
<!--[if IE]>
<style>
.item .tooltip .content{ display:none; opacity:1; }
.item .tooltip:hover .content{ display:block; }
.field .tooltip .content{ display:none; opacity:1; }
.field .tooltip:hover .content{ display:block; }
</style>
<![endif]-->
</head>
......@@ -16,20 +16,20 @@
<a class='btn github' href='https://github.com/yairEO/validator'>Github</a>
<div id='wrap'>
<div class='options'>
<label>
<!-- <label>
<input type='checkbox' id='vfields' />
Vertical orientation
</label>
</label> -->
<label>
<input type='checkbox' id='alerts' />
Disable alerts
<input type='checkbox' class='toggleValidationTooltips' />
Disable vlidation tooltips
</label>
</div>
<h1 title='how forms should be done.'>Forms: validation, styling &amp; semantics</h1>
<section class='form'>
<form action="" method="post" novalidate>
<fieldset>
<div class="item">
<div class="field">
<label>
<span>Name</span>
<input data-validate-length-range="6" data-validate-words="2" name="name" placeholder="ex. John f. Kennedy" required="required" />
......@@ -42,21 +42,21 @@
</div>
</div>
</div>
<div class="item">
<div class="field">
<label>
<span>Occupation</span>
<input class='optional' name="occupation" data-validate-length-range="5,20" type="text" />
<input class='optional' name="occupation" data-validate-length-range="5,15" type="text" />
</label>
<div class='tooltip help'>
<span>?</span>
<div class='content'>
<b></b>
<p>An optional field. This field is only validated when it has a value.<br /><em>Minimum 5 chars for this example.</em></p>
<p>An optional field. This field is only validated when it has a value.<br /><em>Minimum 5 chars, maximum 15</em></p>
</div>
</div>
<span class='extra'>(optional)</span>
</div>
<div class="item">
<div class="field">
<label>
<span>HTML5 Regex</span>
<!--<input required="required" type="text" pattern='\d+' />-->
......@@ -70,19 +70,19 @@
</div>
</div>
</div>
<div class="item">
<div class="field">
<label>
<span>email</span>
<input name="email" class='email' required="required" type="email" />
</label>
</div>
<div class="item">
<div class="field">
<label>
<span>Confirm email address</span>
<input type="email" class='email' name="confirm_email" data-validate-linked='email' required='required'>
</label>
</div>
<div class="item">
<div class="field">
<label>
<span>Number</span>
<input type="number" class='number' name="number" data-validate-minmax="10,100" required='required'>
......@@ -95,13 +95,26 @@
</div>
</div>
</div>
<div class="item">
<div class="field">
<label>
<span>Date</span>
<input class='date' type="date" name="date" required='required'>
</label>
</div>
<div class="item">
<div class="field">
<label>
<span>Time</span>
<input class='time' type="time" name="time" required='required'>
<div class='tooltip help'>
<span>?</span>
<div class='content'>
<b></b>
<p>Format should be: XX:XX</p>
</div>
</div>
</label>
</div>
<div class="field">
<label>
<span>Password</span>
<input type="password" name="password" data-validate-length="6,8" required='required'>
......@@ -114,13 +127,13 @@
</div>
</div>
</div>
<div class="item">
<div class="field">
<label>
<span>Repeat password</span>
<input type="password" name="password2" data-validate-linked='password' required='required'>
</label>
</div>
<div class="item">
<div class="field">
<label>
<span>Telephone</span>
<input type="tel" class='tel' name="phone" required='required' data-validate-length-range="8,20">
......@@ -133,11 +146,11 @@
</div>
</div>
</div>
<div class="item">
<div class="field">
<label>
<span>Drop down selection</span>
<select class="required" name="dropdown">
<option value="">-- none --</option>
<select required name="dropdown">
<option value="">-- please select --</option>
<option value="o1">Option 1</option>
<option value="o2">Option 2</option>
<option value="o3">Option 3</option>
......@@ -151,21 +164,30 @@
</div>
</div>
</div>
<div class="item">
<div class="field">
<label>
<span>url</span>
<input name="url" placeholder="http://www.website.com" required="required" type="url" />
</label>
</div>
<div class="item">
<div class="field">
<label>
<span>Checkbox</span>
<input required="required" type="checkbox" />
<span>I agree</span>
</label>
</div>
<div class="field">
<label>
<span>Checkboxes</span>
<label><input required="required" type="checkbox" />I agree</label>
<span>Checkbox</span>
<input type="checkbox" />
<span>Optional Checkbox</span>
</label>
</div>
<div class="item multi required">
<div class="field multi required">
<label for='multi_first'>
<span>Multifield</span>
</label>
......@@ -186,13 +208,13 @@
</div>
</div>
</div>
<div class="item">
<div class="field">
<label>
<span>File upload</span>
<input type='file' required>
</label>
</div>
<div class="item">
<div class="field">
<label>
<span>message</span>
<textarea required="required" name='message'></textarea>
......@@ -200,10 +222,15 @@
</div>
</fieldset>
<fieldset>
<p>There is a hidden "Required" form field below, notice it will not be validated due to its lack of visibility. The reason for this is that sometimes there is a section in a form that is not visible until some action is taken, but you do not want to change all those fields' "required" attributes on-the-fly, so that is why.</p>
<p>
There is a hidden "required" form field below, notice it will not be validated due to its lack of visibility.<br>
The reason for this is that sometimes there is a section in a form that is not visible until some user "action" is taken,
and changing form fields to be "required" on-the-fly is undesirable.
</p>
<input name="somethingHidden" required="required" type="text" style='display:none' />
</fieldset>
<button id='send' type='submit'>Submit</button>
<button type='submit'>Submit</button>
<button type='reset'>Reset</button>
</form>
</section>
</div>
......@@ -211,45 +238,30 @@
<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, select.required', validator.checkField)
.on('change', 'select.required', validator.checkField)
.on('keypress', 'input[required][pattern]', validator.keypress);
// initialize a validator instance from the "FormValidator" constructor.
// A "<form>" element is optionally passed as an argument, but is not a must
var validator = new FormValidator({"events" : ['blur', 'input', 'change']}, document.forms[0]);
$('.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);
// on form "submit" event
document.forms[0].onsubmit = function(e){
var submit = true,
validatorResult = validator.checkAll(this);
$('form').submit(function(e){
e.preventDefault();
var submit = true;
console.log(validatorResult);
return !!validatorResult.valid;
};
// Validate the form using generic validaing
if( !validator.checkAll( $(this) ) ){
submit = false;
}
if( submit )
this.submit();
// on form "reset" event
document.forms[0].onreset = function(e){
validator.reset();
};
return false;
});
/* FOR DEMO ONLY */
$('#vfields').change(function(){
$('form').toggleClass('mode2');
}).prop('checked',false);
// stuff related ONLY for this demo page:
$('.toggleValidationTooltips').change(function(){
validator.settings.alerts = !this.checked;
$('#alerts').change(function(){
validator.defaults.alerts = (this.checked) ? false : true;
if( this.checked )
$('form .alert').remove();
}).prop('checked',false);
......
vendors/validator/package.json 0 → 100644
浏览文件 @ 4fb515d0
{
"name" : "@yaireo/validator",
"version" : "3.3.4",
"homepage" : "https://github.com/yairEO/validator",
"description" : "The Validator is cross-browser and will give you the power to use future-proof input types such as `tel`, `email`, `number`, `date`, `time`, `checkbox` and `url`",
"_npmUser" : {
"name" : "vsync",
"email" : "vsync.design@gmail.com"
},
"author" : {
"name" : "Yair Even-Or",
"email" : "vsync.design@gmail.com"
},
"main" : "validator.js",
"repository" : {
"type" : "git",
"url" : "git+https://github.com/yairEO/validator.git"
},
"bugs" : {
"url": "https://github.com/yaireo/validator/issues"
}
}
vendors/validator/validator.jquery.json 已删除 100644 → 0
浏览文件 @ f0106934
{
"name": "validator",
"title": "validator",
"description": "The Validator is cross-browser and will give you the power to use future-proof input types such as 'tel', 'email', 'number', 'date', and 'url'. I can sum this as a 'template' for creating web forms. It uses the power of custom 'data' to achieve high flexibility",
"keywords": ["validator", "validation", "form", "input"],
"version": "1.0.6",
"author": {
"name": "Yair Even Or",
"url": "http://dropthebit.com"
},
"maintainers": [
{
"name": "Yair Even Or",
"email": "vsync.design@gmail.com"
}
],
"licenses": [
{
"type": "MIT",
"url": "http://opensource.org/licenses/MIT"
}
],
"bugs": "https://github.com/yairEO/validator/issues",
"homepage": "https://github.com/yairEO/validator",
"docs": "https://github.com/yairEO/validator",
"download": "https://github.com/yairEO/validator",
"dependencies": {
"jquery": ">=1.5"
}
}
vendors/validator/validator.js
浏览文件 @ 4fb515d0
此差异已折叠。
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或