-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
246 lines (210 loc) · 10.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>VulcanVal | Validate HTML form data universally seamlessly</title>
<meta name="description" content="A package to validate data objects (possibly extracted from HTML forms) in client and server sides and a customizable jQuery plugin to validate them in realtime">
<meta name="keywords" content="vulcanval, data validation, form validation, npm package, jquery plugin">
<meta name="robots" content="index, follow">
<meta property="og:title" content="VulcanVal">
<meta property="og:site_name" content="VulcanVal">
<meta property="og:description" content="Validate HTML form data universally seamlessly">
<meta property="og:type" content="profile">
<meta property="og:url" content="http://vulcan-estudios.github.io/vulcanval">
<meta property="og:image" content="http://vulcan-estudios.github.io/vulcanval/site/seo.jpg">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="VulcanVal">
<meta name="twitter:description" content="Validate HTML form data universally seamlessly">
<meta name="twitter:site" content="@romelperez07">
<meta name="twitter:creator" content="@romelperez07">
<meta name="twitter:image" content="http://vulcan-estudios.github.io/vulcanval/site/seo.jpg">
<script src="./site/js/webcomponents-lite.min.js"></script>
<link rel="shortcut icon" href="/site/favicon.png">
<link rel="import" href="./site/polymers/vv-all.html">
</head>
<body>
<vv-header></vv-header>
<vv-main>
<p>A package to validate maps of data extracted from HTML forms in the client and server sides and a customizable jQuery plugin to validate forms as you type with ease.</p>
<p>See <a href="./doc/js">JavaScript API</a> and <a href="./doc/sass">SASS configuration</a>.</p>
<img src="./site/in-action.gif" alt="Vulcan Validator in action">
<a name="features"></a>
<h3>Features</h3>
<h4>Validator package</h4>
<ul>
<li>Configure validators for simple to complex forms easily.</li>
<li>Configure and validate by fields, fieldsets or form.</li>
<li>Use <a href="https://github.com/chriso/validator.js" target="_blank">validator.js</a> v3.0+ with well tested string validators.</li>
<li>Add custom validators.</li>
<li>Internationalization support.</li>
<li>Configuration checkers to prevent errors in settings.</li>
</ul>
<h4>jQuery plugin</h4>
<ul>
<li>Validate as you type.</li>
<li>Inspect for validity, validate visually and reset by field, fieldset or form.</li>
<li>Import and customize via <a href="http://sass-lang.com" target="_blank">SASS</a> or use the built files.</li>
<li>Supports <a href="http://jquery.com" target="_blank">jQuery</a> v1.7+, v2.0+ and v3.0+.</li>
<li>Add custom fields different from form elements.</li>
<li>Extract data from forms elements as data maps (possibly nested objects).</li>
<li>HTML5 integration.</li>
</ul>
<a name="demos"></a>
<h3>Demos</h3>
<ul>
<li><a href="./demo/basic/index.html">Basic use</a></li>
<li><a href="./demo/basic-htmlconfig/index.html">Basic configuration with HTML attributes</a></li>
<li><a href="./demo/normal/index.html">Normal example</a> (with a more real use)</li>
<li><a href="./demo/lang/index.html">Installing a language</a></li>
<li><a href="./demo/lang-new/index.html">Creating a language</a></li>
<li><a href="./demo/intern/index.html">Only functionality</a> (intern)</li>
<li><a href="./demo/custom-fields/index.html">Custom fields</a></li>
<li><a href="./demo/conditions/index.html">Conditions</a></li>
<li><a href="./demo/fieldsets/index.html">Fieldsets</a></li>
<li><a href="https://github.com/vulcan-estudios/vulcanval/tree/master/demo/server" target="_blank">Server</a> (Only code)</li>
<li><a href="https://github.com/vulcan-estudios/vulcanval/tree/master/demo/complete" target="_blank">Complete demo</a> (Only code)</li>
</ul>
<a name="example"></a>
<h3>Example</h3>
<h4>HTML</h4>
<pre><code class="language-html"><form>
<div class="row">
<label for="email">Your Email</label>
<input id="email" name="email" type="email"
data-vv-display="#email-msgs">
<div id="email-msgs"></div>
</div>
<div class="row">
<label for="pass">Your Password</label>
<input id="pass" name="pass" type="password"
data-vv-display="#pass-msgs">
<div id="pass-msgs"></div>
</div>
<div class="row">
<input type="submit">
<input type="reset">
</div>
</form></code></pre>
<h4>JavaScript (client)</h4>
<pre><code class="language-js">// The same configuration as the server
$('form').vulcanval({
disableHTML5Validation: true,
fields: [{
name: 'email',
required: true,
validators: {
isEmail: true,
isLength: { min: 4, max: 32 }
}
}, {
name: 'pass',
required: true,
validators: {
isAlphanumeric: true,
isLength: { min: 4, max: 32 }
}
}]
});
// later
const invalid = $('form').vulcanval('inspect');
if (invalid) {
// `invalid` is an object with all the invalid fields
// keys are the fields names and values its error messages
} else {
const dataMap = $('form').vulcanval('getMap');
// { email: '[email protected]', pass: 'aPassword' }
// send it to the server...
}</code></pre>
<h4>JavaScript (server)</h4>
<pre><code class="language-js">const vulcanval = require('vulcanval');
// The same configuration as the client
const vv = vulcanval({
disableHTML5Validation: true,
fields: [{
name: 'email',
required: true,
validators: {
isEmail: true,
isLength: { min: 4, max: 32 }
}
}, {
name: 'pass',
required: true,
validators: {
isAlphanumeric: true,
isLength: { min: 4, max: 32 }
}
}]
});
// Gotten from the client:
const dataMap = { email: '[email protected]', pass: 'aPassword' };
const invalid = vv.validate(dataMap);
if (invalid) {
// `invalid` is an object with all the invalid fields
// keys are the fields names and values its error messages
} else {
// we are free to go :)
}</code></pre>
<a name="install"></a>
<h3>Install</h3>
<h4>JavaScript</h4>
<p>To install with <a href="http://npmjs.com">NPM</a>:</p>
<pre><code class="language-bash">$ npm install --save vulcanval</code></pre>
<p>To use in <a href="http://nodejs.org">Node</a>:</p>
<pre><code class="language-js">const vulcanval = require('vulcanval');</code></pre>
<p>To use with <a href="http://browserify.org">Browserify</a> or <a href="https://webpack.github.io">Webpack</a>:</p>
<pre><code class="language-js">// The validator module:
const vulcanval = require('vulcanval');
// or
import vulcanval from 'vulcanval';
// And if you want to use the jQuery plugin:
require('vulcanval/bundle/js/jquery/index');
// If you want to use the plugin with jQuery from module bundler (not global):
require('vulcanval/bundle/js/jquery/intern');</code></pre>
<p>VulcanVal has a peer dependency on <a href="https://www.npmjs.com/package/validator" target="_blank">validator.js</a>
and in client-side the plugin requires <a href="http://jquery.com" target="_blank">jQuery</a> so make sure
you install them first.</p>
<pre><code class="language-bash">$ npm install --save validator jquery</code></pre>
<h4>SASS</h4>
<p>To install the styles for the jQuery plugin with <a href="http://sass-lang.com">SASS</a>, include the following import path in the SASS compiler:</p>
<pre><code class="language-none">./node_modules/vulcanval/src/scss/jquery</code></pre>
<p>And import in your SASS code:</p>
<pre><code class="language-css">@import 'vulcanval-jquery';</code></pre>
<h4>Bower</h4>
<p>You can use <a href="http://bower.io" target="_blank">bower</a> to install VulcanVal too:</p>
<pre><code class="language-bash">$ bower install --save vulcanval</code></pre>
<p>And you will have your files at:</p>
<ul>
<li><code><i><BOWER_FOLDER></i>/vulcanval/dist/vulcanval.min.js</code></li>
<li><code><i><BOWER_FOLDER></i>/vulcanval/dist/vulcanval-jquery.min.js</code></li>
<li><code><i><BOWER_FOLDER></i>/vulcanval/dist/vulcanval-jquery.min.css</code></li>
</ul>
<p><code>vulcanval.min.js</code> file will contain the validator.js v6.x included.</p>
<h4>Built files</h4>
<p>You can download the latest browser built files version 3.x with validator.js version 6.x included at:</p>
<ul>
<li><a href="https://raw.githubusercontent.com/vulcan-estudios/vulcanval/master/dist/vulcanval.min.js" download>vulcanval.min.js</a></li>
<li><a href="https://raw.githubusercontent.com/vulcan-estudios/vulcanval/master/dist/vulcanval-jquery.min.js" download>vulcanval-jquery.min.js</a></li>
<li><a href="https://raw.githubusercontent.com/vulcan-estudios/vulcanval/master/dist/vulcanval-jquery.min.css" download>vulcanval-jquery.min.css</a></li>
</ul>
<p>And install them directly on your site before using the package and the plugin after importing jQuery (when using the plugin).</p>
<a name="additionals"></a>
<h3>Additionals</h3>
<ul>
<li>You will have the <a href="https://www.npmjs.com/package/validator" target="_blank">validator.js</a> validators according to the version you install.</li>
<li>You can add certain support to browser input autofill with this package <a href="https://github.com/tbosch/autofill-event" target="_blank">github.com/tbosch/autofill-event</a>.</li>
<li>VulcanVal does not support inputs type file, an alternative is <a href="https://github.com/vulcan-estudios/vulcanup" target="_blank">VulcanUp</a>.</li>
<li>Currently, support for inputs type radio and selects multiple is under work.</li>
</ul>
<a name="thanks"></a>
<h3>Thanks</h3>
<p>To <a href="https://github.com/chriso" target="_blank">Chris O’Hara</a> and everyone who contributed to <a href="https://github.com/chriso/validator.js" target="_blank">validator.js</a> which this project relies on for raw validations.</p>
<a name="license"></a>
<h3>License</h3>
<p><a href="https://github.com/vulcan-estudios/vulcanval/blob/master/LICENSE">MIT</a></p>
</vv-main>
<vv-footer></vv-footer>
</body>
</html>