Skip to content

Commit 851c4af

Browse files
victorjonssonvictorjonsson
authored
Update README.md
1 parent d337ec6 commit 851c4af

File tree

1 file changed

+241
-3
lines changed

1 file changed

+241
-3
lines changed

‎README.md

Lines changed: 241 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
# jQuery Form Validator
1+
# jQuery Form Validator [DISCONTINUED]
22

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

55
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

7-
**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!
7+
**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

99
[![Travis](https://travis-ci.org/victorjonsson/jQuery-Form-Validator.svg)](https://travis-ci.org/victorjonsson/jQuery-Form-Validator/builds/)
1010

@@ -82,7 +82,7 @@ Read the documentation for the default features at [#default-validators](#defaul
8282
* **letternumeric** — *Validate that the input value consists out of only letters and/or numbers*
8383
* **recaptcha** - *Validate Google [reCaptcha 2](https://www.google.com/recaptcha/intro/index.html)*
8484

85-
Read the documentation for the security module at [http://formvalidator.net/#security-validators](http://formvalidator.net/#security-validators)
85+
Read the documentation for the security module at [#security-validators](#security-validators)
8686

8787
### Module: date
8888
* **time** — *hh:mm*
@@ -487,6 +487,244 @@ You can tell any validator to ignore certain characters by using the attribute d
487487
</p>
488488
```
489489

490+
## Security validators<
491+
492+
### Password confirmation
493+
494+
This validator can be used to validate that the values of two inputs are the same. The first input should have a name suffixed with <em>_confirmation</em> and the second should have the same name but without the suffix.
495+
496+
```
497+
<p>
498+
Password (at least 8 characters)
499+
<input name="pass_confirmation" data-validation="length" data-validation-length="min8">
500+
501+
Confirm password
502+
<input name="pass" data-validation="confirmation">
503+
</p>
504+
```
505+
506+
```
507+
<p>
508+
E-mail
509+
<input name="user-email" data-validation="email" />
510+
511+
Repeat e-mail
512+
<input name="repeat" data-validation="confirmation" data-validation-confirm="user-email" />
513+
</p>
514+
```
515+
516+
### Password strength
517+
518+
Use this validator to make sure that your user has a strong enough password. Set attribute <code>data-validation-strength</code> to 1, 2 or 3 depending on how strong password you require.
519+
520+
If you want the strength of the password to be displayed while the user types you call <code>displayPasswordStrength()</code> in the end of the form.
521+
522+
```
523+
<form action="">
524+
<p>
525+
<strong>Password:</strong>
526+
<input name="pass" type="password" break=""
527+
data-validation="strength" break="" data-validation-strength="2">
528+
</p>
529+
...
530+
</form>
531+
532+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
533+
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>
534+
<script>
535+
$.validate({
536+
modules : 'security',
537+
onModulesLoaded : function() {
538+
var optionalConfig = {
539+
fontSize: '12pt',
540+
padding: '4px',
541+
bad : 'Very bad',
542+
weak : 'Weak',
543+
good : 'Good',
544+
strong : 'Strong'
545+
};
546+
547+
$('input[name="pass"]').displayPasswordStrength(optionalConfig);
548+
}
549+
});
550+
</script>
551+
```
552+
553+
### Server side validation
554+
555+
By using this validator you can validate the value given by the user on the server before the form gets submitted. The validation function will send a POST request to the URL declared in <code>data-validation-url</code>. The argument posted to the URL will have the same name as the input being validated.
556+
557+
The form will get the class <em>validating-server-side</em> while the server is being requested.
558+
559+
The response from the validation script must be a JSON formatted object, containing the properties "valid" and "message".
560+
561+
```
562+
{
563+
"valid" : true|false,
564+
"message" : "String with text that should be displayed as error message"
565+
}
566+
```
567+
568+
#### Form
569+
570+
```
571+
<form action="">
572+
<p>
573+
<strong>User name:</strong>
574+
<input name="user" data-validation="server" data-validation-url="/validate-input.php">
575+
</p>
576+
...
577+
</form>
578+
```
579+
580+
#### /validate-input.php
581+
582+
```
583+
<?php
584+
$response = array(
585+
'valid' => false,
586+
'message' => 'Post argument "user" is missing.'
587+
);
588+
589+
if( isset($_POST['user']) ) {
590+
$userRepo = new UserRepository( DataStorage::instance() );
591+
$user = $userRepo->loadUser( $_POST['user'] );
592+
593+
if( $user ) {
594+
// User name is registered on another account
595+
$response = array('valid' => false, 'message' => 'This user name is already registered.');
596+
} else {
597+
// User name is available
598+
$response = array('valid' => true);
599+
}
600+
}
601+
echo json_encode($response);
602+
```
603+
604+
**Modifying the server request**
605+
606+
The parameter containing the input value, sent to the server, will by default have the same name as the input. You can however set your own parameter name by using the attribute <code>data-validation-param-name</code>. You can also send along other parameters to the server by using the attribute <code>data-validation-req-params</code>.
607+
608+
```
609+
<?php
610+
$json = json_encode(array('user'=>$user->get('ID')));
611+
?>
612+
<p>
613+
<strong>E-mail:</strong>
614+
<input type="email" name="check-email" data-validation="server"
615+
data-validation-url="/validate-form-input.php"
616+
data-validation-param-name="email"
617+
data-validation-req-params="<?php echo $json ?>" />
618+
</p>
619+
```
620+
621+
### Credit card validation
622+
623+
This validator makes it possible to validate any of the credit cards VISA, Mastercard, Diners club, Maestro, CJB, Discover and American express
624+
625+
```
626+
<-- Accept credit card number from Visa, Mastercard and American Express -->
627+
<p>
628+
Credit card number
629+
<input data-validation="creditcard" data-validation-allowing="visa, mastercard, amex" />
630+
</p>
631+
<p>
632+
Security code (cvv)
633+
<input name="cvv" data-validation="cvv" />
634+
</p>
635+
```
636+
637+
You can also let the user choose a credit card and programmatically change the allowed credit card on the input of the card number.
638+
639+
```
640+
<p>
641+
Credit card
642+
<select name="credit-card" id="credit-card">
643+
<option value="visa">VISA</option>
644+
<option value="mastercard">Mastercard</option>
645+
<option value="amex">American express</option>
646+
<option value="diners_club">Diners club</option>
647+
<option value="discover">Discover</option>
648+
<option value="cjb">CJB</option>
649+
<option value="maestro">Maestro</option>
650+
</select>
651+
</p>
652+
<p>
653+
Credit card number
654+
<input name="creditcard_num" data-validation="creditcard" data-validation-allowing="visa" />
655+
</p>
656+
...
657+
</div>
658+
<script>
659+
$.validate({
660+
modules : 'security',
661+
onModulesLoaded : function() {
662+
// Bind card type to card number validator
663+
$('#credit-card').on('change', function() {
664+
var card = $(this).val();
665+
$('input[name="creditcard_num"]').attr('data-validation-allowing', card);
666+
});
667+
}
668+
});
669+
</script>
670+
```
671+
672+
### Simple captcha
673+
674+
```
675+
<?php
676+
session_start();
677+
if( isset($_POST['captcha']) && isset($_SESSION['captcha'])) {
678+
if( $_POST['captcha'] != ($_SESSION['captcha'][0]+$_SESSION['captcha'][1]) ) {
679+
die('Invalid captcha answer'); // client does not have javascript enabled
680+
}
681+
// process form data
682+
...
683+
}
684+
$_SESSION['captcha'] = array( mt_rand(0,9), mt_rand(1, 9) );
685+
?>
686+
<form action="">
687+
<p>
688+
What is the sum of <?=$_SESSION['captcha'][0]?> + <?=$_SESSION['captcha'][1]?>?
689+
(security question)
690+
<input name="captcha" data-validation="spamcheck"
691+
data-validation-captcha="<?=( $_SESSION['capthca'][0] + $_SESSION['captcha'][1] )?>"/>
692+
</p>
693+
<p><input type="submit" /></p>
694+
</form>
695+
```
696+
697+
### Google reCAPTCHA
698+
699+
Use this validator if wanting to integrate the Google service reCAPTCHA.
700+
701+
```
702+
<p>
703+
<input data-validation="recaptcha" data-validation-recaptcha-sitekey="[RECAPTCHA_SITEKEY]">
704+
</p>
705+
```
706+
707+
You can also use the setup function to configure the recaptcha service.
708+
709+
```
710+
$.validate({
711+
reCaptchaSiteKey: '...',
712+
reCaptchaTheme: 'light'
713+
});
714+
```
715+
716+
### Letters and numbers
717+
718+
By using the validator <code>letternumeric</code> you can validate that given input value only contains letters and/or numbers. This validator allows any type of character in contrast to the <a href="#default-validators_alphanumeric">alphanumeric</a> validator, which only allows letters A-Z.
719+
720+
```
721+
<!-- This input requires an answer that contains only letters and/or numbers -->
722+
<input type="text" data-validation="letternumeric">
723+
724+
<!-- This input requires the same as the one above but it also allows hyphen and underscore -->
725+
<input type="text" data-validation="alphanumeric" data-validation-allowing="-_">
726+
```
727+
490728
## Changelog
491729

492730
#### 2.3.19

0 commit comments

Comments
 (0)