Skip to content

Commit d337ec6

Browse files
victorjonssonvictorjonsson
committed
Merge branch 'master' of github.com:victorjonsson/jQuery-Form-Validator
2 parents 6a97cd9 + d6e3c5a commit d337ec6

File tree

1 file changed

+210
-3
lines changed

1 file changed

+210
-3
lines changed

‎README.md

Lines changed: 210 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
*Validation framework that let's you configure, rather than code, your validation logic.*
44

5-
I started writing this plugin back in 2009 and it has given me much joy over the year. But all good things must come to an end and now it's time for this plugin to pull in its oars and go down with history.
5+
I started writing this plugin back in 2009 and it has given me much joy over the years. But all good things must come to an end and now it's time for this plugin to pull in its oars and go down with history.
66

77
**NOTICE!** This plugin is no longer being developed! It supports jQuery v. 1.8 >= 2.2.4. No pull requests will become merged in but feel free to fork and do whatever you like!
88

@@ -41,7 +41,7 @@ I started writing this plugin back in 2009 and it has given me much joy over the
4141

4242
### Support for HTML5
4343

44-
This plugin can serve as a fallback solution for the validation attributes in the HTML5 spec. With the [html5](http://www.formvalidator.net/#configuration_html5) module you can use the following native features:
44+
This plugin can serve as a fallback solution for the validation attributes in the HTML5 spec. With the html5 module you can use the following native features:
4545

4646
**Attributes**: require, pattern, maxlength, min, max, placeholder
4747

@@ -70,7 +70,7 @@ This plugin can serve as a fallback solution for the validation attributes in th
7070
* Create input suggestions with ease, no jquery-ui needed
7171
* to apply multiple validators to an input element, separate the validator names using a space (ex: required email)
7272

73-
Read the documentation for the default features at [http://formvalidator.net/#default-validators](http://formvalidator.net/#default-validators)
73+
Read the documentation for the default features at [#default-validators](#default-validators)
7474

7575
### Module: security
7676
* **spamcheck**
@@ -280,6 +280,213 @@ This plugin comes with translations for English, Polish,
280280
Portuguese. You can also choose to override the error
281281
dialogs yourself. Here you can read more about [localization](http://formvalidator.net/#localization)
282282

283+
# Default validators
284+
285+
### Answer length (required)
286+
287+
```
288+
<!-- Require an answer (can be applied to all types of inputs and select elements) -->
289+
<input type="text" data-validation="required">
290+
<input type="checkbox" name="agreement" data-validation="required">
291+
<select name="answer" data-validation="required">
292+
<option value=""> - - Answer - - </option>
293+
<option>Yes</option>
294+
<option>No</option>
295+
</select>
296+
297+
<!-- Max 100 characters -->
298+
<input type="text" data-validation="length" data-validation-length="max100">
299+
300+
<!-- Minimum 20 characters -->
301+
<input type="text" data-validation="length" data-validation-length="min20">
302+
303+
<!-- No less than 50 characters and no more than 200 characters -->
304+
<input type="text" data-validation="length" data-validation-length="50-200">
305+
306+
<!-- Require that atleast 2 options gets choosen -->
307+
<select multiple="multiple" size="5" data-validation="length" data-validation-length="min2">
308+
<option>A</option>
309+
<option>B</option>
310+
<option>C</option>
311+
<option>D</option>
312+
<option>E</option>
313+
</select>
314+
```
315+
This plugin also supports the attributes "required" and "maxlength" by using the Html5 module.
316+
317+
### Numbers
318+
```
319+
<!-- Any numerical value -->
320+
<input type="text" data-validation="number">
321+
322+
<!-- Only allowing float values -->
323+
<input type="text" data-validation="number" data-validation-allowing="float">
324+
325+
<!-- Allowing float values and negative values -->
326+
<input type="text" data-validation="number" data-validation-allowing="float,negative">
327+
328+
<!-- Validate float number with comma separated decimals -->
329+
<input type="text" data-validation="number" data-validation-allowing="float"
330+
data-validation-decimal-separator=",">
331+
332+
<!-- Only allowing numbers from 1 to 100 -->
333+
<input type="text" data-validation="number" data-validation-allowing="range[1;100]">
334+
335+
<!-- Only allowing numbers from -50 to 30 -->
336+
<input type="text" data-validation="number" data-validation-allowing="range[-50;30],negative">
337+
338+
<!-- Only allowing numbers from 0.05 to 0.5 -->
339+
<input type="text" data-validation="number" data-validation-allowing="range[0.05;0.5],float">
340+
You can also define the decimal separator when initializing the validation.
341+
342+
<p>
343+
<strong>Average points</strong><br>
344+
<input type="text" data-validation="number" data-validation-allowing="float">
345+
</p>
346+
....
347+
</form>
348+
<script>
349+
$.validate({
350+
decimalSeparator : ','
351+
});
352+
</script>
353+
```
354+
Inputs of type "number" will also become validated by loading the html5 module.
355+
356+
### E-mail
357+
```
358+
<input type="text" data-validation="email">
359+
```
360+
Inputs of type "email" will also become validated by loading the html5 module.
361+
362+
### URL:s
363+
364+
```
365+
<input type="text" data-validation="url">
366+
```
367+
Inputs of type "url" will also become validated by loading the html5 module.
368+
369+
### Date
370+
371+
```
372+
<!-- Validate date formatted yyyy-mm-dd -->
373+
<input type="text" data-validation="date">
374+
375+
<!-- Validate date formatted yyyy-mm-dd but dont require leading zeros -->
376+
<input type="text" data-validation="date" data-validation-require-leading-zero="false">
377+
378+
<!-- Validate date formatted dd/mm/yyyy -->
379+
<input type="text" data-validation="date" data-validation-format="dd/mm/yyyy">
380+
```
381+
382+
See the date module for further validators.
383+
384+
### Alphanumeric
385+
386+
```
387+
<!-- This input requires an answer that contains only letters a-z and/or numbers -->
388+
<input type="text" data-validation="alphanumeric">
389+
390+
<!-- This input requires the same as the one above but it also allows hyphen and underscore -->
391+
<input type="text" data-validation="alphanumeric" data-validation-allowing="-_">
392+
```
393+
If you want to allow any kind of letters (not only A-Z) you're looking for the letternumeric validator.
394+
395+
### Checkboxes Group
396+
Validate qty of checkboxes in a group (same name) have been checked, using min, max or range. Only the first checkbox element in the group needs to have the validation attributes added.
397+
```
398+
<!-- Require checkboxes in this group, min1 -->
399+
<input type="checkbox" name="newsletters[]" data-validation="checkbox_group" data-validation-qty="min1">
400+
<!-- Require checkboxes in this group, max3 -->
401+
<input type="checkbox" name="newsletters[]" data-validation="checkbox_group" data-validation-qty="max3">
402+
<!-- Require checkboxes in this group, min1, max4 -->
403+
<input type="checkbox" name="newsletters[]" data-validation="checkbox_group" data-validation-qty="1-4">
404+
If your checkboxes group is generated by a server-side script and you don't want to add the validation attributes to each input element, you can use this javascript snippet before calling the validatorLoad() function
405+
406+
<!-- Add validation attributes to first input element in
407+
checkboxes group, before loading validator -->
408+
<script>
409+
$("[name='newsletters[]']:eq(0)")
410+
.valAttr('','validate_checkbox_group')
411+
.valAttr('qty','1-2')
412+
.valAttr('error-msg','chose 1, max 2');
413+
</script>
414+
Regexp
415+
<!-- This input would only allow lowercase letters a-z -->
416+
<input type="text" data-validation="custom" data-validation-regexp="^([a-z]+)$">
417+
```
418+
419+
This plugin also supports the attribute "pattern" by using the Html5 module.
420+
421+
### Character count down
422+
```
423+
<p>
424+
History (<span id="maxlength">50</span> characters left)
425+
<textarea rows="3" id="area"></textarea>
426+
</p>
427+
<script>
428+
$('#area').restrictLength($('#maxlength'));
429+
</script>
430+
```
431+
### Make validation optional
432+
```
433+
<!-- This input will only be validated if a value is given -->
434+
<input type="text" data-validation="url" data-validation-optional="true">
435+
```
436+
You can also use the logic module if you want the validation of an input depend on another input having a value.
437+
438+
### Display help text
439+
It is possible to display help information beside each input. The text will fade in when the input gets focus on and fade out when the input looses focus. The container for the help text will have the class form-help. If you don't want this feature you can read the setup guide on how to disable it.
440+
441+
```
442+
<form action="" id="some-form">
443+
<p>
444+
<strong>Why not?</strong>
445+
<input name="why" data-validation-help="Please give us some more information">
446+
</p>
447+
...
448+
</form>
449+
```
450+
### Validate inputs when blurred
451+
452+
By default each input will become validated immediately when the input looses focus. If you don't want this feature you can read the setup guide on how to disable it.
453+
454+
### Input suggestions
455+
There are two ways you can give suggestions to the user while the user types.
456+
457+
1) Using attribute data-suggestions
458+
459+
```
460+
<p>
461+
What's your favorite color?
462+
<input name="color" data-suggestions="White, Green, Blue, Black, Brown">
463+
</p>
464+
...
465+
</form>
466+
```
467+
2) Using $.formUtils.suggest()
468+
```
469+
<script>
470+
var largeArray = [];
471+
largeArray.push('Something');
472+
largeArray.push('Something else');
473+
...
474+
475+
$.formUtils.suggest( $('#the-input'), largeArray );
476+
</script>
477+
```
478+
This plugin also supports the data-list element by using the Html5 module.
479+
480+
Ignoring characters
481+
You can tell any validator to ignore certain characters by using the attribute data-validation-ignore (comma separated list).
482+
```
483+
<p>
484+
How much do you want to donate?
485+
<!-- Make it optional to end the amount with a dollar-sign -->
486+
<input name="color" data-validation="number" data-validation-ignore="$">
487+
</p>
488+
```
489+
283490
## Changelog
284491

285492
#### 2.3.19

0 commit comments

Comments
 (0)