├── .gitattributes
├── .gitignore
├── README.md
├── fv.css
├── index.html
├── multifield.js
├── package.json
└── validator.js


/.gitattributes:
--------------------------------------------------------------------------------
 1 | # Auto detect text files and perform LF normalization
 2 | * text=auto
 3 | 
 4 | # Custom for Visual Studio
 5 | *.cs     diff=csharp
 6 | *.sln    merge=union
 7 | *.csproj merge=union
 8 | *.vbproj merge=union
 9 | *.fsproj merge=union
10 | *.dbproj merge=union
11 | 
12 | # Standard to msysgit
13 | *.doc	 diff=astextplain
14 | *.DOC	 diff=astextplain
15 | *.docx diff=astextplain
16 | *.DOCX diff=astextplain
17 | *.dot  diff=astextplain
18 | *.DOT  diff=astextplain
19 | *.pdf  diff=astextplain
20 | *.PDF	 diff=astextplain
21 | *.rtf	 diff=astextplain
22 | *.RTF	 diff=astextplain
23 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | #################
  2 | ## Eclipse
  3 | #################
  4 | 
  5 | *.pydevproject
  6 | .project
  7 | .metadata
  8 | bin/
  9 | tmp/
 10 | *.tmp
 11 | *.bak
 12 | *.swp
 13 | *~.nib
 14 | local.properties
 15 | .classpath
 16 | .settings/
 17 | .loadpath
 18 | .vscode
 19 | 
 20 | # External tool builders
 21 | .externalToolBuilders/
 22 | 
 23 | # Locally stored "Eclipse launch configurations"
 24 | *.launch
 25 | 
 26 | # CDT-specific
 27 | .cproject
 28 | 
 29 | # PDT-specific
 30 | .buildpath
 31 | 
 32 | 
 33 | #################
 34 | ## Visual Studio
 35 | #################
 36 | 
 37 | ## Ignore Visual Studio temporary files, build results, and
 38 | ## files generated by popular Visual Studio add-ons.
 39 | 
 40 | # User-specific files
 41 | *.suo
 42 | *.user
 43 | *.sln.docstates
 44 | 
 45 | # Build results
 46 | [Dd]ebug/
 47 | [Rr]elease/
 48 | *_i.c
 49 | *_p.c
 50 | *.ilk
 51 | *.meta
 52 | *.obj
 53 | *.pch
 54 | *.pdb
 55 | *.pgc
 56 | *.pgd
 57 | *.rsp
 58 | *.sbr
 59 | *.tlb
 60 | *.tli
 61 | *.tlh
 62 | *.tmp
 63 | *.vspscc
 64 | .builds
 65 | *.dotCover
 66 | 
 67 | ## TODO: If you have NuGet Package Restore enabled, uncomment this
 68 | #packages/
 69 | 
 70 | # Visual C++ cache files
 71 | ipch/
 72 | *.aps
 73 | *.ncb
 74 | *.opensdf
 75 | *.sdf
 76 | 
 77 | # Visual Studio profiler
 78 | *.psess
 79 | *.vsp
 80 | 
 81 | # ReSharper is a .NET coding add-in
 82 | _ReSharper*
 83 | 
 84 | # Installshield output folder
 85 | [Ee]xpress
 86 | 
 87 | # DocProject is a documentation generator add-in
 88 | DocProject/buildhelp/
 89 | DocProject/Help/*.HxT
 90 | DocProject/Help/*.HxC
 91 | DocProject/Help/*.hhc
 92 | DocProject/Help/*.hhk
 93 | DocProject/Help/*.hhp
 94 | DocProject/Help/Html2
 95 | DocProject/Help/html
 96 | 
 97 | # Click-Once directory
 98 | publish
 99 | 
100 | # Others
101 | [Bb]in
102 | [Oo]bj
103 | sql
104 | TestResults
105 | *.Cache
106 | ClientBin
107 | stylecop.*
108 | ~$*
109 | *.dbmdl
110 | Generated_Code #added for RIA/Silverlight projects
111 | 
112 | # Backup & report files from converting an old project file to a newer
113 | # Visual Studio version. Backup files are not needed, because we have git ;-)
114 | _UpgradeReport_Files/
115 | Backup*/
116 | UpgradeLog*.XML
117 | 
118 | 
119 | 
120 | ############
121 | ## Windows
122 | ############
123 | 
124 | # Windows image file caches
125 | Thumbs.db
126 | 
127 | # Folder config file
128 | Desktop.ini
129 | 
130 | 
131 | #############
132 | ## Python
133 | #############
134 | 
135 | *.py[co]
136 | 
137 | # Packages
138 | *.egg
139 | *.egg-info
140 | dist
141 | build
142 | eggs
143 | parts
144 | bin
145 | var
146 | sdist
147 | develop-eggs
148 | .installed.cfg
149 | 
150 | # Installer logs
151 | pip-log.txt
152 | 
153 | # Unit test / coverage reports
154 | .coverage
155 | .tox
156 | 
157 | #Translations
158 | *.mo
159 | 
160 | #Mr Developer
161 | .mr.developer.cfg
162 | 
163 | # Mac crap
164 | .DS_Store
165 | /.npmrc
166 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <h1 align="center">
  2 |   <a href='https://yaireo.github.io/validator'>Validator</a> - Lightweight & Easy HTML form <em>inputs</em> checker
  3 | </h1>
  4 | <a href='https://www.npmjs.com/package/@yaireo/validator'>
  5 |     <img src="https://img.shields.io/npm/v/@yaireo/validator.svg" />
  6 | </a>
  7 | 
  8 | The Validator is cross-browser and will give you the power to use future-proof input types such as:<br>
  9 | `tel`, `email`, `number`, `date`, `time`, `checkbox` and `url`.
 10 | 
 11 | # [👉 See Demo](http://yaireo.github.io/validator)
 12 | 
 13 |     npm i @yaireo/validator --save
 14 | 
 15 |     // usage:
 16 | 
 17 |     import FormValidator from '@yaireo/validator'
 18 | 
 19 |     // or download the `validator.js` file and add load it inside your HTML file
 20 |     <script src='validator.js'></script>
 21 | 
 22 | ### Why should you use this?
 23 | 
 24 | * Cross browser validation
 25 | * Deals with all sorts of edge cases
 26 | * Utilize new HTML5 types for unsupported browsers
 27 | * Flexible error messaging system
 28 | * Light-weight (19kb + comments, unminified)
 29 | 
 30 | ## Validation types support
 31 | 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?
 32 | 
 33 | For a full list of all the available types, visit the working draft page.
 34 | These input types can be validated by the JS for – `<input type='foo' name='bar' />`. (Support is synthesized)
 35 | 
 36 | ✔️ `text` <br/>
 37 | ✔️ `email` <br/>
 38 | ✔️ `password` - also comparing "re-type password" inputs<br/>
 39 | ✔️ `number` <br/>
 40 | ✔️ `date` <br/>
 41 | ✔️ `time` <br/>
 42 | ✔️ `uRL` <br/>
 43 | ✔️ `search` <br/>
 44 | ✔️ `file` <br/>
 45 | ✔️ `tel` <br/>
 46 | ✔️ `checkbox` <br/>
 47 | ✔️ `select` <br/>
 48 | ✔️ `textarea`<br/>
 49 | ✔️ `hidden` – can also have the ‘required’ attribute
 50 | 
 51 | 
 52 | ## Basic semantics
 53 | ```html
 54 | <form action="" method="post" novalidate>
 55 |     <fieldset>
 56 |         <div class="field">
 57 |             <label>
 58 |                 <span>Name</span>
 59 |                 <input data-validate-length-range="6" data-validate-words="2" name="name" placeholder="ex. John f. Kennedy" required="required" type="text" />
 60 |             </label>
 61 |             <div class='tooltip help'>
 62 |                 <span>?</span>
 63 |                 <div class='content'>
 64 |                     <b></b>
 65 |                     <p>Name must be at least 2 words</p>
 66 |                 </div>
 67 |             </div>
 68 |         </div>
 69 |         <div class="field">
 70 |             <label>
 71 |                 <span>email</span>
 72 |                 <input name="email" required="required" type="email" />
 73 |             </label>
 74 |         </div>
 75 |             ...
 76 | ```
 77 | 
 78 | First, obviously, there is a Form element with the novalidate attribute to make sure all the native HTML5 validations (which currently suck) are disabled. Proceeding, 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 field groups that are visually separated from each other for example. Now, we treat every form field element the user interacts with, whatsoever, as a “field”, and therefor these “fields” will be wrapped with `<div class='field'>`. This isolation gives great powers.
 79 | Next, inside a 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 requires 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.
 80 | 
 81 | 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.
 82 | 
 83 | 
 84 | ### HTML Attributes on form elements
 85 | 
 86 | | Attribute                    | Purpose                                                                                                                                                                                                                                                                                                                                     |
 87 | | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 88 | | `required`                   | Defines that this field should be validated (with JS by my implementation and not via native HTML5 browser defaults)                                                                                                                                                                                                                        |
 89 | | `placeholder`                | Writes some placeholder text which usually describes the fields with some example input (not supported in IE8 and below)                                                                                                                                                                                                                    |
 90 | | `pattern`                    | Defines a pattern which the field is evaluated with. Out-of-the-box 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 |
 91 | | `data-validate-words`        | Defines the minimum amount of words for this field                                                                                                                                                                                                                                                                                          |
 92 | | `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                                                                                                                                                                        |
 93 | | `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                                                                                                                                                                                         |
 94 | | `data-validate-linked`       | Defines the field which the current field value (the attribute is set on) should be compared to. Value can be a selector or another input's `name` attribute's value                                                                                                                                                                      |
 95 | | `data-validate-minmax`       | For type `number` only. Defines the minimum and/or maximum value that can be in that field                                                                                                                                                                                                                                                  |
 96 | | `data-validate-text-invalid` | Error text message for specific field
 97 | ### `pattern` attribute
 98 | It is possible to write your own unique Regex patterns directly in the attribute or reference to it by custom name, for example:
 99 | 
100 | ```html
101 | <input type="text" required="required" pattern="myCustomRegex" />
102 | ```
103 | 
104 | ```js
105 | var validator = new FormValidator({
106 |     regex : {
107 |         myCustomRegex: '/whatever/'
108 |     }
109 | }, );
110 | ```
111 | 
112 | ### Optional fields
113 | 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.
114 | 
115 | ## Error messages
116 | 
117 | ```js
118 | {
119 |     invalid         : 'input is not as expected',
120 |     short           : 'input is too short',
121 |     long            : 'input is too long',
122 |     checked         : 'must be checked',
123 |     empty           : 'please put something here',
124 |     select          : 'Please select an option',
125 |     number_min      : 'too low',
126 |     number_max      : 'too high',
127 |     url             : 'invalid URL',
128 |     number          : 'not a number',
129 |     email           : 'email address is invalid',
130 |     email_repeat    : 'emails do not match',
131 |     date            : 'invalid date',
132 |     time            : 'invalid time',
133 |     password_repeat : 'passwords do not match',
134 |     no_match        : 'no match',
135 |     complete        : 'input is not complete'
136 | }
137 | ```
138 | 
139 | This object can be extended easily. The idea is to extend it with new keys which represent the `name` (attribute) of the field you want the message to be linked to, and that custom message appear as the `general error` one.
140 | Default messages can be over-ridden.
141 | 
142 | ### Example of a specific input field's error message:
143 | ```html
144 | <input type="text" data-validate-length-range="2,6" required="required" pattern="alphanumeric"  data-validate-text-invalid='Please follow the pattern rules'/>
145 | ```
146 | 
147 | ### Another example:
148 | ```html
149 | <input type="text" name="mySpecialInput" data-validate-length-range="2,6" required="required" pattern="alphanumeric" />
150 | ```
151 | 
152 | ```js
153 | var validator = new FormValidator({
154 |     texts : {
155 |         mySpecialInput: 'wrong input' // set custom error message for that specific field, by "name"
156 |     }
157 | });
158 | ```
159 | 
160 | ### Example: for a given type `date` field, lets set a custom (general error) message like so:
161 | 
162 | ```js
163 | // set custom text on initialization:
164 | var validator = new FormValidator({
165 |     texts : {
166 |         date: 'not a real date'
167 |     }
168 | });
169 | 
170 | // or post-initialization
171 | var validator = new FormValidator();
172 | validator.texts.date = 'not a real date';
173 | ```
174 | 
175 | Error messages can be disabled:
176 | 
177 | ```js
178 |     validator = new FormValidator({
179 |         alerts: false
180 |     });
181 | 
182 |     // or by:
183 |     var validator = new FormValidator();
184 |     validator.settings.alerts = false;
185 | ```
186 | 
187 | ## Binding the validation to a form
188 | 
189 | 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.
190 | 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).
191 | 
192 | ### Usage example - validate on submit
193 | 
194 | 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.
195 | 
196 | ```js
197 | var validator = new FormValidator();
198 | // select your "form" element from the DOM and attach an "onsubmit" event handler to it:
199 | document.forms[0].onsubmit = function(e){
200 |     var validatorResult = validator.checkAll(this); // "this" reffers to the currently submitetd form element
201 | 
202 |     return !!validatorResult.valid;
203 | };
204 | ```
205 | 
206 | ### Usage example - validate on field blur/input/change events
207 | Check every field (using event Capture)
208 | 
209 | ```js
210 | var validator = new FormValidator();
211 | 
212 | document.forms[0].addEventListener('blur', function(e){
213 |     validator.checkField(e.target)
214 | }, true);
215 | 
216 | document.forms[0].addEventListener('input', function(e){
217 |     validator.checkField(e.target);
218 | }, true);
219 | 
220 | document.forms[0].addEventListener('change', function(e){
221 |     validator.checkField(e.target)
222 | }, true);
223 | ```
224 | 
225 | 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:
226 | 
227 | ```js
228 | var validator = new FormValidator( document.forms[0], {
229 |     "events" : ['blur', 'input', 'change'] // for a single one, just pass a string, ex: "blur"
230 | });
231 | ```
232 | 
233 | 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:
234 | 
235 | ```js
236 | // validate fields on these events:
237 | 
238 | 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)
239 | 
240 | // wait for the form, or its' fields, to be ready (for whatever reason), and then bind the events as follows:
241 | validator.events(['blur', 'input', 'change']);
242 | ```
243 | 
244 | ## Tooltips (for each field which did not validate)
245 | 
246 | The helper tooltips **&lt;div class='tooltip help'&gt;**, which work using pure CSS, are elements which hold a small **'?'** icon and when hovered over with the mouse, reveal a text explaining what the field “field” is about or for example, what the allowed input format is.
247 | 
248 | ## Classes
249 | `validator.settings.classes` object can be modified:
250 | 
251 | ```js
252 | var validatorClasses = {
253 |     field : 'field', // class for each input wrapper
254 |     alert : 'alert', // call on the alert tooltip
255 |     bad   : 'bad'    // classes for bad input
256 | };
257 | 
258 | validator = new FormValidator(null, {classes:validatorClasses});
259 | 
260 | // or
261 | validator = new FormValidator();
262 | validator.settings.classes.bad = 'error';
263 | ```
264 | 
265 | ## Bonus – multifields
266 | 
267 | I have a cool feature I wrote which I call *"multifields"*.
268 | These are fields which are often used 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 the ‘multifield.js’ file.
269 | 


--------------------------------------------------------------------------------
/fv.css:
--------------------------------------------------------------------------------
  1 | html, body{ height:100%; }
  2 | /* body min-width is 992px because it's 960px grid + extra 16px from each side of the header */
  3 | body{ min-width:960px; color:#444; background-color:#F1F1F1; font-size:12px; line-height:1.5em; font-family:Arial, Helvetica, sans-serif; }
  4 | 
  5 | html, body, div, span, object, iframe,
  6 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  7 | abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
  8 | small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
  9 | fieldset, form, label, legend,
 10 | table, caption, tbody, tfoot, thead, tr, th, td,
 11 | article, aside, canvas, details, figcaption, figure,
 12 | footer, header, hgroup, menu, nav, section, summary,
 13 | time, mark, audio, video {
 14 |     margin:0;
 15 |     padding:0;
 16 |     border:0;
 17 |     vertical-align:baseline;
 18 | }
 19 | 
 20 | small{ font-size:0.9em; }
 21 | 
 22 | article, aside, details, figcaption, figure,
 23 | footer, header, hgroup, menu, nav, section {
 24 |     display:block;
 25 | }
 26 | 
 27 | h1{ font-size:2em; margin:0 0 50px 0; }
 28 | button{ cursor:pointer; }
 29 | p{ padding:5px 0; }
 30 | 
 31 | a{ text-decoration:none; }
 32 | .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; }
 33 | .btn:hover{ background:#0068BA; }
 34 | .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; }
 35 | .btn.github{ float:right; }
 36 | 
 37 | #wrap{ padding:50px; width:860px; background-color:#FFF; margin:20px auto; border:1px dashed #AAA; position:relative; }
 38 | .options{ position:absolute; top:-1px; right:-1px; background-color:#F1F1F1; padding:4px 0; border-left:1px dashed #AAA; border-bottom:1px dashed #AAA; }
 39 | 	.options label{ cursor:pointer; margin:0 10px; }
 40 | 
 41 | input, textarea{ border:1px solid #D1D1D1; }
 42 | input, select{ font-size:inherit; margin:0; }
 43 | input:focus, textarea:focus{ border-color:#AAA; }
 44 | 
 45 | input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
 46 | input[type=checkbox]{ width:auto; border:none; bottom:-1px; cursor:pointer; margin:2px 8px 0 0; position:relative; transform:scale(1.2); }
 47 | button{ font-size:1.1em; padding:5px 25px; }
 48 | 
 49 | /* Tooltips helpers */
 50 | .field .tooltip{ float:left; top:2px; left:7px; position:relative; z-index:2; }
 51 | .field .tooltip:hover{ z-index:3; }
 52 |    .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; }
 53 |     .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); }
 54 |         .field .tooltip p{ padding:0; }
 55 |    .field .tooltip.down .content{ left:auto; right:0; top:30px; }
 56 |    .field .tooltip:hover .content{ opacity:1; left:36px; }
 57 |       .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; }
 58 |         .field .tooltip.down .content b{ left:auto; right:6px; top:-10px; border-width:5px; border-color:transparent #333 #333 transparent; }
 59 | 
 60 | /* alerts (when validation fails) */
 61 | .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; }
 62 | .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; }
 63 | .field.bad .alert{ left:0; opacity:1; }
 64 | 
 65 | 
 66 | @keyframes shake{
 67 |     15%{ transform:translateX(-5px); }
 68 |     30%{ transform:translateX(5px); }
 69 | 	45%{ transform:translateX(-3px); }
 70 | 	60%{ transform:translateX(3px); }
 71 | 	75%{ transform:translateX(2px); }
 72 | 	100%{ transform:none; }
 73 | }
 74 | @-webkit-keyframes shake{
 75 |     25%{ -webkit-transform:translateX(-6px); }
 76 |     75%{ -webkit-transform:translateX(6px); }
 77 | }
 78 | 
 79 | form fieldset{ clear:both; margin:0 0 10px 0; }
 80 | form .field{ padding:5px 0; position:relative; height:2em; }
 81 | form .field.fields{ height:auto; }
 82 | 	.field label, .field .label{  cursor:pointer; }
 83 | 		.field label > span:first-child, .field .label{ float:left; width:160px; text-transform:capitalize; line-height:2em; }
 84 | 	.field input, .field textarea{ float:left; padding:3px 4px; width:210px; -webkit-transition:0.2s; -moz-transition:0.2s; transition:0.2s; }
 85 | 	.field input[type=checkbox]{ width:auto; }
 86 | 
 87 | 	.label ~ label{ vertical-align:middle; margin:0.3em 1.2em 0 0; }
 88 | 
 89 | 	.field input.short{ width:90px; }
 90 | 	.field input:focus:not([type="checkbox"]), .field textarea:focus{ box-shadow:0 0 4px #00AEEF; border:1px solid #00AEEF; }
 91 | 	.field textarea{  }
 92 | 	.field select{ float:left; width:220px; padding:2px 0; margin:0; border:1px solid #CCC; text-transform:capitalize; }
 93 | 		.field select option{ padding:1px; }
 94 | 
 95 |     .field > .extra{ float:left; font-size:0.9em; color:#999; line-height:2em; margin-left:13px; }
 96 | 
 97 | 	.field.multi .input{ float:left; }
 98 | 		.field.multi input{ float:left; margin-right:5px; width:35px; text-align:center; }
 99 | 		form .field.multi input:nth-last-child(-n+2){ margin:0; }
100 | 	.field.fields input{ border-top:5px solid #E1E1E1; margin:0 0 0 160px; }
101 | 
102 | 	.bad input,
103 | 	.bad select,
104 | 	.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; }
105 | 
106 | 
107 | /* mode2 - where the label's text is above the field and not next to it
108 | --------------------------------------------------------------------------- */
109 | .mode2 .field{ float:left; clear:left; margin-bottom:30px; height:auto; padding:0; zoom:1; }
110 | .mode2 .field.bad{ margin-bottom:8px; }
111 | .mode2 .field::before, .mode2 .field::after{ content:''; display:table; }
112 | .mode2 .field::after{ clear:both; }
113 | 	.mode2 .field label{  }
114 | 		.mode2 .field label span{ float:none; display:block; line-height:inherit; }
115 | 	.mode2 .field input:not(type="checkbox"), .field textarea{ width:250px; margin:0; }
116 | 	.mode2 .field textarea{ width:350px; margin:0; }
117 | 	.mode2 .field select{ width:260px; float:none; }
118 | 	.mode2 .field.multi label{ float:none; }
119 | 	.mode2 .field.multi input{ float:left; margin-right:5px; width:35px; text-align:center; }
120 | 	.mode2 .field .tooltip{ left:auto; position:absolute; right:-22px; top:19px; }
121 | 	.mode2 .field .alert::after{ display:none; }
122 | 	.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; }
123 |     .mode2 .field > .extra{ position:absolute; right:0; }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <title>Total Form Validation</title>
  6 |     <meta name="viewport" content="width=device-width, user-scalable=no">
  7 | 	<link rel="stylesheet" href="fv.css" type="text/css" />
  8 | 	<!--[if IE]>
  9 | 	<style>
 10 | 		.field .tooltip .content{ display:none; opacity:1; }
 11 | 		.field .tooltip:hover .content{ display:block; }
 12 | 	</style>
 13 | 	<![endif]-->
 14 | </head>
 15 | <body>
 16 | 	<a class='btn github' href='https://github.com/yairEO/validator'>Github</a>
 17 | 	<div id='wrap'>
 18 | 		<div class='options'>
 19 | 		<!-- 	<label>
 20 | 				<input type='checkbox' id='vfields' />
 21 | 				Vertical orientation
 22 | 			</label> -->
 23 | 			<label>
 24 | 				<input type='checkbox' class='toggleValidationTooltips' />
 25 | 				Disable vlidation tooltips
 26 | 			</label>
 27 | 		</div>
 28 | 		<h1 title='how forms should be done.'>Forms: validation, styling &amp; semantics</h1>
 29 | 		<section class='form'>
 30 | 			<form action="" method="post" novalidate>
 31 | 				<fieldset>
 32 | 					<div class="field">
 33 | 						<label>
 34 | 							<span>Name</span>
 35 | 							<input data-validate-length-range="6" data-validate-words="2" name="name" placeholder="ex. John f. Kennedy" required="required" />
 36 | 						</label>
 37 | 						<div class='tooltip help'>
 38 | 							<span>?</span>
 39 | 							<div class='content'>
 40 | 								<b></b>
 41 | 								<p>Name must be at least 2 words</p>
 42 | 							</div>
 43 | 						</div>
 44 | 					</div>
 45 | 					<div class="field">
 46 | 						<label>
 47 | 							<span>Occupation</span>
 48 | 							<input class='optional' name="occupation" data-validate-length-range="5,15" type="text" />
 49 | 						</label>
 50 | 						<div class='tooltip help'>
 51 | 							<span>?</span>
 52 | 							<div class='content'>
 53 | 								<b></b>
 54 | 								<p>An optional field. This field is only validated when it has a value.<br /><em>Minimum 5 chars, maximum 15</em></p>
 55 | 							</div>
 56 | 						</div>
 57 |                         <span class='extra'>(optional)</span>
 58 | 					</div>
 59 | 					<div class="field">
 60 | 						<label>
 61 | 							<span>HTML5 Regex</span>
 62 | 							<!--<input required="required" type="text" pattern='\d+' />-->
 63 | 							<input type="text" name="mySpecialInput" data-validate-length-range="2,6" required="required" placeholder="eg. 123456" pattern="alphanumeric"  data-validate-text-invalid='Please follow the pattern rules' />
 64 | 						</label>
 65 | 						<div class='tooltip help'>
 66 | 							<span>?</span>
 67 | 							<div class='content'>
 68 | 								<b></b>
 69 | 								<p>This field uses HTML5 "pattern" attribute to be validated.<br /><em>"<strong>\d+</strong>" - only digits are allowed</em></p>
 70 | 							</div>
 71 | 						</div>
 72 | 					</div>
 73 | 					<div class="field">
 74 | 						<label>
 75 | 							<span>email</span>
 76 | 							<input name="email" class='email' required="required" type="email" />
 77 | 						</label>
 78 | 					</div>
 79 | 					<div class="field">
 80 | 						<label>
 81 | 							<span>Multiple emails</span>
 82 | 							<input name="email-multi" required="required" type="email" multiple />
 83 | 						</label>
 84 | 					</div>
 85 | 					<div class="field">
 86 | 						<label>
 87 | 							<span>Confirm email address</span>
 88 | 							<input type="email" class='email' name="confirm_email" data-validate-linked='email' required='required'>
 89 | 						</label>
 90 | 					</div>
 91 | 					<div class="field">
 92 | 						<label>
 93 | 							<span>Number</span>
 94 | 							<input type="number" class='number' name="number" data-validate-minmax="10,100" required='required'>
 95 | 						</label>
 96 | 						<div class='tooltip help'>
 97 | 							<span>?</span>
 98 | 							<div class='content'>
 99 | 								<b></b>
100 | 								<p>Number must be between 10 and 100</p>
101 | 							</div>
102 | 						</div>
103 | 					</div>
104 | 					<div class="field">
105 | 						<label>
106 | 							<span>Date</span>
107 | 							<input class='date' type="date" name="date" required='required'>
108 | 						</label>
109 | 					</div>
110 | 					<div class="field">
111 | 						<label>
112 | 							<span>Time</span>
113 | 							<input class='time' type="time" name="time" required='required'>
114 | 							<div class='tooltip help'>
115 | 							<span>?</span>
116 | 							<div class='content'>
117 | 								<b></b>
118 | 								<p>Format should be: XX:XX</p>
119 | 							</div>
120 | 						</div>
121 | 						</label>
122 | 					</div>
123 | 					<div class="field">
124 | 						<label>
125 | 							<span>Password</span>
126 | 							<input type="password" name="password" data-validate-length="6,8" required='required'>
127 | 						</label>
128 | 						<div class='tooltip help'>
129 | 							<span>?</span>
130 | 							<div class='content'>
131 | 								<b></b>
132 | 								<p>Should be of length 6 OR 8 characters</p>
133 | 							</div>
134 | 						</div>
135 | 					</div>
136 | 					<div class="field">
137 | 						<label>
138 | 							<span>Repeat password</span>
139 | 							<input type="password" name="password2" data-validate-linked='password' required='required'>
140 | 						</label>
141 | 					</div>
142 | 					<div class="field">
143 | 						<label>
144 | 							<span>Telephone</span>
145 | 							<input type="tel" class='tel' name="phone" required='required' data-validate-length-range="8,20">
146 | 						</label>
147 | 						<div class='tooltip help'>
148 | 							<span>?</span>
149 | 							<div class='content'>
150 | 								<b></b>
151 | 								<p>Notice that for a phone number user can input a '+' sign, a dash '-' or a space ' '</p>
152 | 							</div>
153 | 						</div>
154 | 					</div>
155 | 					<div class="field">
156 | 						<label>
157 | 							<span>Drop down selection</span>
158 | 							<select required name="dropdown">
159 | 								<option value="">-- please select --</option>
160 | 								<option value="o1">Option 1</option>
161 | 								<option value="o2">Option 2</option>
162 | 								<option value="o3">Option 3</option>
163 | 							</select>
164 | 						</label>
165 | 						<div class='tooltip help'>
166 | 							<span>?</span>
167 | 							<div class='content'>
168 | 								<b></b>
169 | 								<p>Choose something or choose not. what shall it be?</p>
170 | 							</div>
171 | 						</div>
172 | 					</div>
173 | 					<div class="field">
174 | 						<label>
175 | 							<span>url</span>
176 | 							<input name="url" placeholder="http://www.website.com" required="required" type="url" />
177 | 						</label>
178 | 					</div>
179 | 
180 | 					<div class="field">
181 | 						<label>
182 | 							<span>Checkbox</span>
183 | 							<input required="required" type="checkbox" />
184 | 							<span>I agree</span>
185 | 						</label>
186 | 					</div>
187 | 
188 | 					<div class="field">
189 | 						<label>
190 | 							<span>Checkbox</span>
191 | 							<input type="checkbox" />
192 | 							<span>Optional Checkbox</span>
193 | 						</label>
194 | 					</div>
195 | 
196 | 					<div class="field multi required">
197 | 						<label for='multi_first'>
198 | 							<span>Multifield</span>
199 | 						</label>
200 | 						<div class='input'>
201 | 							<input type="text" name="multi1" maxlength='4' id='multi_first'>
202 | 							<input type="text" name="multi2" maxlength='4'>
203 | 							<input type="text" name="multi3" maxlength='4'>
204 | 							<input type="text" name="multi4" maxlength='4'>
205 | 							<input type="text" name="multi5" maxlength='4'>
206 | 							<input type="text" name="multi6" maxlength='4'>
207 | 							<input data-validate-length-range="24" data-validate-pattern="alphanumeric" id="serial" name="serial" type="hidden" required='required' />
208 | 						</div>
209 | 						<div class='tooltip help'>
210 | 							<span>?</span>
211 | 							<div class='content'>
212 | 								<b></b>
213 | 								<p>This is a multifield, which let the user input a serial number or credit card number for example, and the trick is to validate the combined result, which is stored in a hidden field</p>
214 | 							</div>
215 | 						</div>
216 | 					</div>
217 | 					<div class="field">
218 | 						<label>
219 | 							<span>File upload</span>
220 | 							<input type='file' required>
221 | 						</label>
222 | 					</div>
223 | 					<div class="field">
224 | 						<label>
225 | 							<span>message</span>
226 | 							<textarea required="required" name='message'></textarea>
227 | 						</label>
228 | 					</div>
229 | 				</fieldset>
230 | 				<fieldset>
231 | 					<p>
232 | 						There is a hidden "required" form field below, notice it will not be validated due to its lack of visibility.<br>
233 | 						The reason for this is that sometimes there is a section in a form that is not visible until some user "action" is taken,
234 | 						and changing form fields to be "required" on-the-fly is undesirable.
235 | 					</p>
236 | 					<input name="somethingHidden" required="required" type="text" style='display:none' />
237 | 				</fieldset>
238 | 				<button type='submit'>Submit</button>
239 |                 <button type='reset'>Reset</button>
240 | 			</form>
241 | 		</section>
242 | 	</div>
243 | 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
244 |     <script src="multifield.js"></script>
245 |     <script src="validator.js"></script>
246 | 	<script>
247 | 		// initialize a validator instance from the "FormValidator" constructor.
248 |         // A "<form>" element is optionally passed as an argument, but is not a must
249 | 		var validator = new FormValidator({"events" : ['blur', 'paste', 'change']}, document.forms[0]);
250 | 
251 | 		validator.texts.mySpecialInput = "wrong input" // custom error message for pattern mismatch
252 | 
253 |         // on form "submit" event
254 | 		document.forms[0].onsubmit = function(e){
255 | 			var submit = true,
256 | 					validatorResult = validator.checkAll(this);
257 | 
258 | 			console.log(validatorResult);
259 | 			return !!validatorResult.valid;
260 | 		}
261 | 
262 | 		// on form "reset" event
263 | 		document.forms[0].onreset = function(e){
264 | 				validator.reset();
265 | 		}
266 | 
267 |         // stuff related ONLY for this demo page:
268 | 		$('.toggleValidationTooltips').change(function(){
269 | 			validator.settings.alerts = !this.checked;
270 | 
271 | 			if( this.checked )
272 | 				$('form .alert').remove();
273 | 		}).prop('checked',false);
274 | 	</script>
275 | </body>
276 | </html>


--------------------------------------------------------------------------------
/multifield.js:
--------------------------------------------------------------------------------
 1 | // multifield - connects several input fields to each-other
 2 | // By Yair Even Or / 2011 / dropthebit.com
 3 | ;(function(){
 4 | 	var fixedEvent = 0;
 5 | 	
 6 | 	function funnel(e){
 7 | 		fixedEvent++;
 8 | 		var that = this;
 9 | 		setTimeout(function(){
10 | 			keypress.call(that, e);
11 | 			fixedEvent = 0;
12 | 		},0);
13 | 	}
14 | 	
15 | 	function keypress(e){
16 | 		var nextPrevField,
17 | 			sel = [this.selectionStart, this.selectionEnd];
18 | 
19 | 		if( !e.charCode && e.keyCode != 37 && e.keyCode != 39 && e.keyCode != 8 )			
20 | 			return;	
21 | 
22 | 		// 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	
23 | 		if( (e.keyCode == 8 && sel[1] == 0) || (e.keyCode == 37 && sel[1] == 0) )			
24 | 			setCaret( $(this).prev(':text')[0], 100);
25 | 		
26 | 		// if the 'right' arrow key was pressed and caret was at the end -> advance to the next field
27 | 		else if( e.keyCode == 39 && sel[1] == this.value.length )	
28 | 			setCaret( $(this).next(':text')[0], 0);
29 | 		
30 | 		// automatically move to the next field once user has filled the current one completely		
31 | 		else if( e.charCode && sel[1] == sel[0] && sel[0] == this.maxLength )
32 | 			setCaret( $(this).next(':text')[0], 100);
33 | 
34 | 		function setCaret(input, pos){
35 | 			if( !input ) return;
36 | 			if (input.setSelectionRange){
37 | 				input.focus();
38 | 				input.setSelectionRange(pos, pos);
39 | 			}
40 | 			else if( input.createTextRange ){
41 | 				var range = input.createTextRange();
42 | 				range.collapse(true);
43 | 				range.moveEnd('character', pos);
44 | 				range.moveStart('character', pos);
45 | 				range.select();
46 | 			}
47 | 		}
48 | 		
49 | 		combine.apply(this);
50 | 	};
51 | 	// After each 'change' event of any of the fields, combine all the values to the hidden input.	
52 | 	function combine(){
53 | 		var hidden =  $(this).siblings('input[type=hidden]').val('')[0];		
54 | 		$(this.parentNode).find(':text').each( function(){			
55 | 			hidden.value += this.value;
56 | 		});
57 | 	}
58 | 
59 | 	$('div.multi').on({'keydown.multifeild':funnel, 'keypress.multifeild':funnel, 'change.multifeild':combine}, 'input');
60 | })();


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@yaireo/validator",
 3 |   "version": "3.4.0",
 4 |   "homepage": "https://github.com/yairEO/validator",
 5 |   "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`",
 6 |   "author": {
 7 |     "name": "Yair Even-Or",
 8 |     "email": "vsync.design@gmail.com"
 9 |   },
10 |   "main": "validator.js",
11 |   "files": [
12 |     "validator.js"
13 |   ],
14 |   "repository": {
15 |     "type": "git",
16 |     "url": "git+https://github.com/yairEO/validator.git"
17 |   },
18 |   "bugs": {
19 |     "url": "https://github.com/yaireo/validator/issues"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/validator.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |     Validator v3.3.7
  3 |     (c) Yair Even Or
  4 |     https://github.com/yairEO/validator
  5 | */
  6 | 
  7 | ;(function(root, factory){
  8 |     var define = define || {};
  9 |     if( typeof define === 'function' && define.amd )
 10 |         define([], factory);
 11 |     else if( typeof exports === 'object' && typeof module === 'object' )
 12 |         module.exports = factory();
 13 |     else if(typeof exports === 'object')
 14 |         exports["FormValidator"] = factory();
 15 |     else
 16 |         root.FormValidator = factory();
 17 | }(this, function(){
 18 |     // More information at: https://gist.github.com/dperini/729294
 19 |     var urlRegex = new RegExp(
 20 |         "^" +
 21 |             "(?:(?:(?:https?|ftp):)?\\/\\/)" +
 22 |             "(?:\\S+(?::\\S*)?@)?" +
 23 |             "(?:" +
 24 |             "(?!(?:10|127)(?:\\.\\d{1,3}){3})" +
 25 |             "(?!(?:169\\.254|192\\.168)(?:\\.\\d{1,3}){2})" +
 26 |             "(?!172\\.(?:1[6-9]|2\\d|3[0-1])(?:\\.\\d{1,3}){2})" +
 27 |             "(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])" +
 28 |             "(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}" +
 29 |             "(?:\\.(?:[1-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))" +
 30 |             "|" +
 31 |             "(?:" +
 32 |                 "(?:" +
 33 |                 "[a-z0-9\\u00a1-\\uffff]" +
 34 |                 "[a-z0-9\\u00a1-\\uffff_-]{0,62}" +
 35 |                 ")?" +
 36 |                 "[a-z0-9\\u00a1-\\uffff]\\." +
 37 |             ")+" +
 38 |             "(?:[a-z\\u00a1-\\uffff]{2,}\\.?)" +
 39 |             ")" +
 40 |             "(?::\\d{2,5})?" +
 41 |             "(?:[/?#]\\S*)?" +
 42 |         "$", "i"
 43 |     );
 44 | 
 45 |     function FormValidator( settings, formElm ){
 46 |         this.data = {}; // holds the form fields' data
 47 | 
 48 |         this.DOM = {
 49 |             scope : formElm
 50 |         };
 51 | 
 52 |         this.settings = this.extend({}, this.defaults, settings || {});
 53 |         this.texts = this.extend({}, this.texts, this.settings.texts || {});
 54 | 
 55 |         this.settings.events && this.events();
 56 |     }
 57 | 
 58 |     FormValidator.prototype = {
 59 |         // Validation error texts
 60 |         texts : {
 61 |             invalid         : 'input is not as expected',
 62 |             short           : 'input is too short',
 63 |             long            : 'input is too long',
 64 |             checked         : 'must be checked',
 65 |             empty           : 'please put something here',
 66 |             select          : 'Please select an option',
 67 |             number_min      : 'too low',
 68 |             number_max      : 'too high',
 69 |             url             : 'invalid URL',
 70 |             number          : 'not a number',
 71 |             email           : 'email address is invalid',
 72 |             email_repeat    : 'emails do not match',
 73 |             date            : 'invalid date',
 74 |             time            : 'invalid time',
 75 |             password_repeat : 'passwords do not match',
 76 |             no_match        : 'no match',
 77 |             complete        : 'input is not complete'
 78 |         },
 79 | 
 80 |         // default settings
 81 |         defaults : {
 82 |             alerts : true,
 83 |             events : false,
 84 |             regex : {
 85 |                 url          : urlRegex,
 86 |                 phone        : /^\+?([0-9]|[-|' '])+$/i,
 87 |                 numeric      : /^[0-9]+$/i,
 88 |                 alphanumeric : /^[a-zA-Z0-9]+$/i,
 89 |                 time         : /^([0-1][0-9]|2[0-3]):[0-5][0-9]$/,
 90 |                 email        : {
 91 |                     illegalChars : /[\(\)\<\>\,\;\:\\\/\"\[\]]/,
 92 |                     filter       : /^.+@.+\..{2,24}$/ // exmaple email "steve@s-i.photo"
 93 |                 }
 94 |             },
 95 |             classes : {
 96 |                 item  : 'field',
 97 |                 alert : 'alert',
 98 |                 bad   : 'bad'
 99 |             }
100 |         },
101 | 
102 |         // Tests (per type)
103 |         // each test return "true" when passes and a string of error text otherwise
104 |         tests : {
105 |             sameAsPlaceholder : function( field, data ){
106 |                 if( field.getAttribute('placeholder') )
107 |                     return data.value != field.getAttribute('placeholder') || this.texts.empty;
108 |                 else
109 |                     return true
110 |             },
111 | 
112 |             hasValue : function( value ){
113 |                 return value ? true : this.texts.empty
114 |             },
115 | 
116 |             // 'linked' is a special test case for inputs which their values should be equal to each other (ex. confirm email or retype password)
117 |             linked : function(a, b, type){
118 |                 if( b != a ){
119 |                     // choose a specific message or a general one
120 |                     return this.texts[type + '_repeat'] || this.texts.no_match
121 |                 }
122 |                 return true
123 |             },
124 | 
125 |             email : function(field, data){
126 |                 var i, emails = data.value.trim().split(' ')
127 | 
128 |                 if( !field.multiple && emails.length > 1 )
129 |                 return this.texts.email
130 | 
131 |                 for( var i = 0; i < emails.length; i++ )
132 |                     if ( !this.settings.regex.email.filter.test( emails[i] ) || emails[i].match( this.settings.regex.email.illegalChars ) )
133 |                         return this.texts.email
134 | 
135 |                 return true
136 |             },
137 | 
138 |             // a "skip" will skip some of the tests (needed for keydown validation)
139 |             text : function(field, data){
140 |                 var that = this;
141 |                 // make sure there are at least X number of words, each at least 2 chars long.
142 |                 // for example 'john F kenedy' should be at least 2 words and will pass validation
143 |                 if( data.validateWords ){
144 |                     var words = data.value.split(' ');
145 |                     // iterate on all the words
146 |                     var wordsLength = function(len){
147 |                         for( var w = words.length; w--; )
148 |                             if( words[w].length < len )
149 |                                 return that.texts.short;
150 |                         return true;
151 |                     };
152 | 
153 |                     if( words.length < data.validateWords || !wordsLength(2) )
154 |                         return this.texts.complete;
155 | 
156 |                     return true;
157 |                 }
158 | 
159 |                 if( data.lengthRange && data.value.length < data.lengthRange[0] ){
160 |                     return this.texts.short;
161 |                 }
162 | 
163 |                 // check if there is max length & field length is greater than the allowed
164 |                 if( data.lengthRange && data.lengthRange[1] && data.value.length > data.lengthRange[1] ){
165 |                     return this.texts.long;
166 |                 }
167 | 
168 |                 // check if the field's value should obey any length limits, and if so, make sure the length of the value is as specified
169 |                 if( data.lengthLimit && data.lengthLimit.length ){
170 |                     while( data.lengthLimit.length ){
171 |                         if( data.lengthLimit.pop() == data.value.length ){
172 |                             return true;
173 |                         }
174 |                     }
175 | 
176 |                     return this.texts.complete;
177 |                 }
178 | 
179 |                 if( data.pattern ){
180 |                     var regex = this.settings.regex[data.pattern];
181 | 
182 |                     if( !regex )
183 |                         regex = data.pattern;
184 | 
185 |                     try{
186 |                         var jsRegex = new RegExp(regex).test(data.value);
187 |                         if( data.value && !jsRegex ){
188 |                             return data.invaildtext || this.texts[field.name] || this.texts.invalid
189 |                         }
190 |                     }
191 |                     catch(err){
192 |                         console.warn(err, field, 'regex is invalid');
193 |                         return this.texts.invalid
194 |                     }
195 |                 }
196 | 
197 |                 return true;
198 |             },
199 | 
200 |             number : function( field, data ){
201 |                 var a = data.value;
202 | 
203 |                 // if not not a number
204 |                 if( isNaN(parseFloat(a)) && !isFinite(a) ){
205 |                     return this.texts.number;
206 |                 }
207 |                 // not enough numbers
208 |                 else if( data.lengthRange && a.length < data.lengthRange[0] ){
209 |                     return this.texts.short;
210 |                 }
211 |                 // check if there is max length & field length is greater than the allowed
212 |                 else if( data.lengthRange && data.lengthRange[1] && a.length > data.lengthRange[1] ){
213 |                     return this.texts.long;
214 |                 }
215 |                 else if( data.minmax[0] && (a|0) < data.minmax[0] ){
216 |                     return this.texts.number_min;
217 |                 }
218 |                 else if( data.minmax[1] && (a|0) > data.minmax[1] ){
219 |                     return this.texts.number_max;
220 |                 }
221 | 
222 |                 return true;
223 |             },
224 | 
225 |             // Date is validated in European format (day,month,year)
226 |             date : function( field, data ){
227 |                 var day, A = data.value.split(/[-./]/g), i;
228 |                 // if there is native HTML5 support:
229 |                 if( field.valueAsNumber )
230 |                     return true;
231 | 
232 |                 for( i = A.length; i--; ){
233 |                     if( isNaN(parseFloat( data.value )) && !isFinite(data.value) )
234 |                         return this.texts.date;
235 |                 }
236 |                 try{
237 |                     day = new Date(A[2], A[1]-1, A[0]);
238 |                     if( day.getMonth()+1 == A[1] && day.getDate() == A[0] )
239 |                         return true;
240 |                     return this.texts.date;
241 |                 }
242 |                 catch(er){
243 |                     return this.texts.date
244 |                 }
245 |             },
246 | 
247 |             time : function( field, data ){
248 |                 var pattern = this.settings.regex.time;
249 |                 if( pattern.test(data.value) )
250 |                     return true;
251 |                 else
252 |                     return this.texts.time
253 |             },
254 | 
255 |             url : function( field, data ){
256 |                 if( !this.settings.regex.url.test(data.value) )
257 |                     return this.texts.url;
258 | 
259 |                 return true
260 |             },
261 | 
262 |             hidden : function( field, data ){
263 |                 if( data.lengthRange && data.value.length < data.lengthRange[0] )
264 |                     return this.texts.short;
265 | 
266 |                 if( data.pattern ){
267 |                     if( data.pattern == 'alphanumeric' && !this.settings.regex.alphanumeric.test(data.value) )
268 |                         return this.texts.invalid;
269 |                 }
270 | 
271 |                 return true
272 |             },
273 | 
274 |             select : function( field, data ){
275 |                 return data.value ? true : this.texts.select;
276 |             },
277 | 
278 |             checkbox : function( field, data ){
279 |                 if( field.checked ) return true;
280 | 
281 |                 return this.texts.checked
282 |             }
283 |         },
284 | 
285 |         /**
286 |          * bind events on form elements
287 |          * @param  {Array/String} types   [description]
288 |          * @param  {Object} formElm       [optional - form element, if one is not already defined on the instance]
289 |          * @return {[type]}               [description]
290 |          */
291 |         events : function( types, formElm ){
292 |             var that = this;
293 | 
294 |             types   = types   || this.settings.events;
295 |             formElm = formElm || this.DOM.scope;
296 | 
297 |             if( !formElm || !types ) return;
298 | 
299 |             if( types instanceof Array )
300 |                 types.forEach(bindEventByType);
301 |             else if( typeof types == 'string' )
302 |                 bindEventByType(types)
303 | 
304 |             function bindEventByType( type ){
305 |                 formElm.addEventListener(type, function(e){
306 |                     // a timeout is needed because on paste event the new value will not be available right away
307 |                     setTimeout(that.checkField.bind(that), 0, e.target)
308 |                 }, true)
309 |             }
310 |         },
311 | 
312 |         /**
313 |          * Marks an field as invalid
314 |          * @param  {DOM Object} field
315 |          * @param  {String} text
316 |          * @return {String} - useless string (should be the DOM node added for warning)
317 |          */
318 |         mark : function( field, text ){
319 |             if( !text || !field )
320 |                 return false;
321 | 
322 |             var that = this;
323 | 
324 |             // check if not already marked as 'bad' and add the 'alert' object.
325 |             // if already is marked as 'bad', then make sure the text is set again because i might change depending on validation
326 |             var item = this.closest(field, '.' + this.settings.classes.item) || field,
327 |                 alert = item.querySelector('.'+this.settings.classes.alert),
328 |                 warning;
329 | 
330 |             if( this.settings.alerts ){
331 |                 if( alert )
332 |                     alert.innerHTML = text;
333 |                 else{
334 |                     warning = '<div class="'+ this.settings.classes.alert +'">' + text + '</div>';
335 |                     item.insertAdjacentHTML('beforeend', warning);
336 |                 }
337 |             }
338 | 
339 |             item.classList.remove(this.settings.classes.bad);
340 | 
341 |             // a delay so the "alert" could be transitioned via CSS
342 |             setTimeout(function(){
343 |                 item.classList.add( that.settings.classes.bad );
344 |             });
345 | 
346 |             return warning;
347 |         },
348 | 
349 |         /* un-marks invalid fields
350 |         */
351 |         unmark : function( field ){
352 |             var warning;
353 | 
354 |             if( !field ){
355 |                 console.warn('no "field" argument, null or DOM object not found');
356 |                 return false;
357 |             }
358 | 
359 |             var fieldWrap = this.closest(field, '.' + this.settings.classes.item);
360 | 
361 |             if( fieldWrap ){
362 |                 warning = fieldWrap.querySelector('.'+ this.settings.classes.alert);
363 |                 fieldWrap.classList.remove(this.settings.classes.bad);
364 |             }
365 | 
366 |             if( warning )
367 |                 warning.parentNode.removeChild(warning);
368 |         },
369 | 
370 |         /**
371 |          * removes unmarks all fields
372 |          * @return {[type]} [description]
373 |          */
374 |         reset : function( formElm ){
375 |             var fieldsToCheck,
376 |                 that = this;
377 | 
378 |             formElm = formElm || this.DOM.scope;
379 |             fieldsToCheck = this.filterFormElements( formElm.elements );
380 | 
381 |             fieldsToCheck.forEach(function(elm){
382 |                 that.unmark(elm);
383 |             });
384 |         },
385 | 
386 |         /**
387 |          * Normalize types if needed & return the results of the test (per field)
388 |          * @param  {String} type  [form field type]
389 |          * @param  {*}      value
390 |          * @return {Boolean} - validation test result
391 |          */
392 |         testByType : function( field, data ){
393 |             data = this.extend({}, data); // clone the data
394 | 
395 |             var type = data.type;
396 | 
397 |             if( type == 'tel' )
398 |                 data.pattern = data.pattern || 'phone';
399 | 
400 |             if( !type || type == 'password' || type == 'tel' || type == 'search' || type == 'file' )
401 |                 type = 'text';
402 | 
403 |             return this.tests[type] ? this.tests[type].call(this, field, data) : true;
404 |         },
405 | 
406 |         prepareFieldData : function( field ){
407 |             var nodeName = field.nodeName.toLowerCase(),
408 |                 id = Math.random().toString(36).substr(2,9);
409 | 
410 |             field["_validatorId"] = id;
411 |             this.data[id] = {};
412 | 
413 |             this.data[id].value   = field.value.replace(/^\s+|\s+$/g, "");  // cache the value of the field and trim it
414 |             this.data[id].valid   = true;                                  // initialize validity of field
415 |             this.data[id].type    = field.type;             // every field starts as 'valid=true' until proven otherwise
416 |             this.data[id].pattern = field.pattern;
417 | 
418 |             // Special treatment
419 |             if( nodeName === "select" )
420 |                 this.data[id].type = "select";
421 | 
422 |             else if( nodeName === "textarea" )
423 |                 this.data[id].type = "text";
424 | 
425 |             /* Gather Custom data attributes for specific validation:
426 |             */
427 |             this.data[id].validateWords  = field.getAttribute('data-validate-words') || 0;
428 |             this.data[id].lengthRange    = field.getAttribute('data-validate-length-range') ? (field.getAttribute('data-validate-length-range')+'').split(',') : [1];
429 |             this.data[id].lengthLimit    = field.getAttribute('data-validate-length') ? (field.getAttribute('data-validate-length')+'').split(',') : false;
430 |             this.data[id].minmax         = field.getAttribute('data-validate-minmax') ? (field.getAttribute('data-validate-minmax')+'').split(',') : false; // for type 'number', defines the minimum and/or maximum for the value as a number.
431 |             this.data[id].validateLinked = field.getAttribute('data-validate-linked');
432 |             this.data[id].invaildtext    = field.getAttribute('data-validate-text-invalid');
433 | 
434 |             return this.data[id];
435 |         },
436 | 
437 |         /**
438 |          * Find the closeset element, by selector
439 |          * @param  {Object} el       [DOM node]
440 |          * @param  {String} selector [CSS-valid selector]
441 |          * @return {Object}          [Found element or null if not found]
442 |          */
443 |         closest : function(el, selector){
444 |             var matchesFn;
445 | 
446 |             // find vendor prefix
447 |             ['matches','webkitMatchesSelector','mozMatchesSelector','msMatchesSelector','oMatchesSelector'].some(function(fn){
448 |                 if( typeof document.body[fn] == 'function' ){
449 |                     matchesFn = fn;
450 |                     return true;
451 |                 }
452 |                 return false;
453 |             })
454 | 
455 |             // traverse parents
456 |             while (el) {
457 |                 if (el && el[matchesFn](selector))
458 |                     return el;
459 | 
460 |                 el = el.parentElement
461 |             }
462 | 
463 |             return null;
464 |         },
465 | 
466 |         /**
467 |          * MDN polyfill for Object.assign
468 |          */
469 |         extend : function( target, varArgs ){
470 |             if( !target )
471 |                 throw new TypeError('Cannot convert undefined or null to object');
472 | 
473 |             var to = Object(target),
474 |                 nextKey, nextSource, index;
475 | 
476 |             for( index = 1; index < arguments.length; index++ ){
477 |                 nextSource = arguments[index];
478 | 
479 |                 if( nextSource != null ) // Skip over if undefined or null
480 |                     for( nextKey in nextSource )
481 |                         // Avoid bugs when hasOwnProperty is shadowed
482 |                         if( Object.prototype.hasOwnProperty.call(nextSource, nextKey) )
483 |                             to[nextKey] = nextSource[nextKey];
484 |             }
485 | 
486 |             return to;
487 |         },
488 | 
489 |         /* Checks a single form field by it's type and specific (custom) attributes
490 |         * {DOM Object}     - the field to be checked
491 |         * {Boolean} silent - don't mark a field and only return if it passed the validation or not
492 |         */
493 |         checkField : function( field, silent ){
494 |             // skip testing fields whom their type is not HIDDEN but they are HIDDEN via CSS.
495 |             if( field.type !='hidden' && !field.clientWidth )
496 |                 return { valid:true, error:"" }
497 | 
498 |             field = this.filterFormElements( [field] )[0];
499 | 
500 |             // if field did not pass filtering or is simply not passed
501 |             if( !field )
502 |                 return { valid:true, error:"" }
503 | 
504 |            // this.unmark( field );
505 | 
506 |             var linkedTo,
507 |                 testResult,
508 |                 optional = field.className.indexOf('optional') != -1,
509 |                 data = this.prepareFieldData( field ),
510 |                 form = this.closest(field, 'form'); // if the field is part of a form, then cache it
511 | 
512 |             // check if field has any value
513 |             /* Validate the field's value is different than the placeholder attribute (and attribute exists)
514 |             *  this is needed when fixing the placeholders for older browsers which does not support them.
515 |             */
516 | 
517 |             // first, check if the field even has any value
518 |             testResult = this.tests.hasValue.call(this, data.value);
519 | 
520 |             // if the field has value, check if that value is same as placeholder
521 |             // if( testResult === true )
522 |             //     testResult = this.tests.sameAsPlaceholder.call(this, field, data );
523 | 
524 |             data.valid = optional || testResult === true;
525 | 
526 |             if( optional && !data.value ){
527 |                 return { valid:true, error:"" }
528 |             }
529 | 
530 |             if( testResult !== true )
531 |                 data.valid = false;
532 | 
533 |             // validate by type of field. use 'attr()' is proffered to get the actual value and not what the browsers sees for unsupported types.
534 |             if( data.valid ){
535 |                 testResult = this.testByType(field, data);
536 |                 data.valid = testResult === true ? true : false;
537 |             }
538 | 
539 |             // if this field is linked to another field (their values should be the same)
540 |             if( data.valid && data.validateLinked ){
541 |                 if( data['validateLinked'].indexOf('#') == 0 )
542 |                     linkedTo = document.body.querySelector(data['validateLinked'])
543 |                 else if( form.length )
544 |                     linkedTo = form.querySelector('[name=' + data['validateLinked'] + ']');
545 |                 else
546 |                     linkedTo = document.body.querySelector('[name=' + data['validateLinked'] + ']');
547 | 
548 |                 testResult = this.tests.linked.call(this, field.value, linkedTo.value, data.type );
549 |                 data.valid = testResult === true ? true : false;
550 |             }
551 | 
552 |             if( !silent )
553 |                 this[data.valid ? "unmark" : "mark"]( field, testResult ); // mark / unmark the field
554 | 
555 |             return {
556 |                 valid : data.valid,
557 |                 error : data.valid === true ? "" : testResult
558 |             };
559 |         },
560 | 
561 |         /**
562 |          * Only allow certain form elements which are actual inputs to be validated
563 |          * @param  {HTMLCollection} form fields Array [description]
564 |          * @return {Array}                            [description]
565 |          */
566 |         filterFormElements : function( fields ){
567 |             var i,
568 |                 fieldsToCheck = [];
569 | 
570 |             for( i = fields.length; i--; ) {
571 |                 var isAllowedElement = fields[i].nodeName.match(/input|textarea|select/gi),
572 |                     isRequiredAttirb = fields[i].hasAttribute('required'),
573 |                     isDisabled = fields[i].hasAttribute('disabled'),
574 |                     isOptional = fields[i].className.indexOf('optional') != -1;
575 | 
576 |                 if( isAllowedElement && (isRequiredAttirb || isOptional) && !isDisabled )
577 |                     fieldsToCheck.push(fields[i]);
578 |             }
579 | 
580 |             return fieldsToCheck;
581 |         },
582 | 
583 |         checkAll : function( formElm ){
584 |             if( !formElm ){
585 |                 console.warn('element not found');
586 |                 return false;
587 |             }
588 | 
589 |             var that = this,
590 |                 result = {
591 |                     valid  : true,  // overall form validation flag
592 |                     fields : []     // array of objects (per form field)
593 |                 },
594 |                 fieldsToCheck = this.filterFormElements( formElm.elements );
595 |                 // get all the input/textareas/select fields which are required or optional (meaning, they need validation only if they were filled)
596 | 
597 |             fieldsToCheck.forEach(function(elm, i){
598 |                 var fieldData = that.checkField(elm);
599 | 
600 |                 // use an AND operation, so if any of the fields returns 'false' then the submitted result will be also FALSE
601 |                 result.valid = !!(result.valid * fieldData.valid);
602 | 
603 |                 result.fields.push({
604 |                     field   : elm,
605 |                     error   : fieldData.error,
606 |                     valid   : !!fieldData.valid
607 |                 })
608 |             });
609 | 
610 |             return result;
611 |         }
612 |     }
613 | 
614 |     return FormValidator;
615 | }));
616 | 


--------------------------------------------------------------------------------