-
Notifications
You must be signed in to change notification settings - Fork 474
Home
victorjonsson edited this page Apr 13, 2011
·
57 revisions
This plugin was created to minimize javascript logic in the html code when dealing with front-end validation of form data. Live example can be viewed here
Usage example
<form action="" onsubmit="return $(this).validate()">
<p>
Name (4 characters minimum):
<input name="user" data-validation="validate_min_length length4" />
</p>
<p>
Birthdate (yyyy-mm-dd):
<input name="birth" data-validation="validate_birthdate" />
</p>
<p>
Website:
<input name="website" data-validation="validate_url" />
</p>
<p>
<input type="submit" />
</p>
</form>- validate_url
- validate_date — yyyy-mm-dd
- validate_birthdate — yyyy-mm-dd, not allowing dates in the future or dates that is older then 122 years
- validate_email
- validate_time — hh:mm
- validate_domain — domain.com
- validate_phone — atleast 7 digits only one hyphen and plus allowed
- validate_swemob — validate that the value is a swedish mobile telephone number
- validate_float
- validate_int
- validate_length — Validate that input length is in given range (length3-20)
- validate_confirmation
- validate_spamcheck
- validate_swesec - validate swedish social security number
- required — no validation except that a value has to be given
- validate_custom - *Validate value against regexp (validate_custom regexp/^[a-z]{2} [0-9]{2}$/)
var myConf = {
// Name of element attribute holding the validation rules (default is data-validation)
validationRuleAttribute : 'class',
// Names of inputs not to be validated even though node attribute containing the
// validation rules tells us to
ignore : ['som-name', 'other-name'],
// Class that will be put on elements which value is invalid
errorElementClass : 'error',
// Border color of elements which value is invalid, empty string to not change border color
borderColorOnError : '#FFF',
// Class of div container showing error messages
errorMessageClass : 'error_message',
// Position of error messages. Can be either "top" meaning in the top of the form
// or "element" meaning that each error message will be displayed beside the input
// field that it is refering to
errorMessagePosition : 'top'
};
var myLang = {
errorTitle : 'Något gick fel',
requiredFields : 'Du fyllde inte i alla fält markerade med *'
};
$('#my_form').submit(function() {
return $(this).validate(myLang, myConf);
});<?php
session_start();
if( isset($_POST['captcha']) && isset($_SESSION['captcha'])) {
if($_POST['captcha'] != ($_SESSION['captcha'][0]+$_SESSION['captcha'][1]))
die('Invalid captcha answer'); // client does not have javascript enabled
}
$_SESSION['captcha'] = array( mt_rand(0,9), mt_rand(1, 9) );
?>
<html>
....
<form action="" onsubmit="return $(this).validate();">
<p>
What is the sum of <?=$_SESSION['captcha'][0]?> + <?=$_SESSION['captcha'][1]?>? (security question)
<input name="captcha" class="validate_spamcheck captcha<?=( $_SESSION['capthca'][0] + $_SESSION['captcha'][1] )?>"
</p>
<p><input type="submit" /></p>
</form>
...
</html><p>
History (<span id="maxlength">50</span> characters left)
<textarea rows="3" id="area"></textarea>
</p>
<script type="text/javascript">
$('#area').restrictLength($('#maxlength'));
</script> <p>Password: <input type="password" name="pass" class="validate_confirmation" /></p>
<p>Confirm password: <input type="password" name="pass_confirmation" /></p>