JQuery - ValidationEngine
Aus Wikizone
Mächtiges und recht einfaches JavaScript Tool zur Validierung von Formularen. Fehleranzeige in Sprechblasen direkt am Eingabefeld.
Links[Bearbeiten]
http://posabsolute.github.io/jQuery-Validation-Engine/
Quickstart[Bearbeiten]
Einbinden
<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/> <script src="js/jquery-1.8.2.min.js"></script> <script src="js/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
Initialisieren
$("#form.id").validationEngine(action or options);
Erweitern[Bearbeiten]
Über jquery.validationEngine-en.js (oder die anderen Lokalisierungsdateien kann man neue Validierungen hinzufügen oder die error messages ändern.
Beispiele[Bearbeiten]
Ein paar Beispiele von: http://it.post80s.com/jquery-form-validation (Zugriff 2013-08)
At least one of the field of the group must be filled. It needs to be given a group name that is unique across the form.
<input value="" class="validate[groupRequired[payments]]" type="text" name="creditcard" id="creditcard" /> <input class="validate[groupRequired[payments]]" type="text" id="paypal" name="paypal"/>
The following example, enforces a minimum of two selected checkboxes
<input class="validate[minCheckbox[2]]" type="checkbox" name="group1" id="maxcheck1" value="5"/> <input class="validate[minCheckbox[2]]" type="checkbox" name="group1" id="maxcheck2" value="3"/> <input class="validate[minCheckbox[2]]" type="checkbox" name="group1" id="maxcheck3" value="9"/>
Note how the input.name is identical across the fields.
Radios
<input id="radio1" class="validate[required] radio" type="radio" value="5" name="group0"> <input id="radio2" class="validate[required] radio" type="radio" value="3" name="group0"> <input id="radio3" class="validate[required] radio" type="radio" value="9" name="group0">
Password fields
<input type="password" name="NewPwd" id="NewPwd" value="123" class="validate[required] text-input"> <input type="password" name="NewPwd2" id="NewPwd2" class="validate[required,equals[NewPwd]] text-input">
You can run other functions after the form is validated and before the form is submitted:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#fCompanyEdit").validationEngine({
promptPosition : "centerRight"
,onAjaxFormComplete: function(status,form) {
if (status === true) {
return pageLoad_onsubmit();
form.submit();
}
}
});
});
</script>
Ausführliches Beispiel[Bearbeiten]
<html><head>
<meta content="text/html; charset=utf-8" http-equiv="Content-type">
<title>JQuery Validation Engine</title>
<link type="text/css" href="../css/validationEngine.jquery.css" rel="stylesheet">
<link type="text/css" href="../css/template.css" rel="stylesheet">
<script type="text/javascript" src="../js/jquery-1.7.2.min.js">
</script>
<script charset="utf-8" type="text/javascript" src="../js/languages/jquery.validationEngine-en.js">
</script>
<script charset="utf-8" type="text/javascript" src="../js/jquery.validationEngine.js">
</script>
<script>
jQuery(document).ready(function(){
// binds form submission and fields to the validation engine
jQuery("#formID").validationEngine();
});
/**
*
* @param {jqObject} the field where the validation applies
* @param {Array[String]} validation rules for this field
* @param {int} rule index
* @param {Map} form options
* @return an error string if validation failed
*/
function checkHELLO(field, rules, i, options){
if (field.val() != "HELLO") {
// this allows to use i18 for the error msgs
return options.allrules.validate2fields.alertText;
}
}
</script>
</head>
<body>
<p>
<a onclick="alert('is the form valid? '+jQuery('#formID').validationEngine('validate'))" href="#">Evaluate form</a>
| <a onclick="jQuery('#sport').validationEngine('validate')" href="#">Validate sport1 select field</a>
| <a onclick="jQuery('#sport').validationEngine('hide')" href="#">Close favorite sport 1 prompt</a>
| <a onclick="jQuery('#formID').validationEngine('hide')" href="#">Close all prompts on form</a>
| <a onclick="jQuery('#formID').validationEngine('updatePromptsPosition')" href="#">Update all prompts positions</a>
| <a onclick="jQuery('#test').validationEngine('showPrompt', 'This is an example', 'pass')" href="#">Build a prompt on a div</a>
| <a onclick="jQuery('#test').validationEngine('hide')" href="#">Close div prompt</a>
| <a href="../index.html">Back to index</a>
</p>
<p>
This demonstration shows the different validators available
<br>
</p>
<div style="width:150px;" class="test" id="test">This is a div element</div>
<form method="post" class="formular" id="formID">
<fieldset>
<legend>
Required!
</legend>
<label>
<span>Field is required : </span>
<input type="text" id="req" name="req" class="validate[required] text-input" value="">
</label>
<legend>
Placeholder & required
</legend>
<label>
<span>Field is required : </span>
<input type="text" id="reqplaceholder" name="reqplaceholder" class="validate[required] text-input" data-validation-placeholder="This is a placeholder" value="This is a placeholder">
</label>
<label>
<span>Favorite sport 1:</span>
<select class="validate[required]" id="sport" name="sport">
<option value="">Choose a sport</option>
<option value="option1">Tennis</option>
<option value="option2">Football</option>
<option value="option3">Golf</option>
</select>
</label>
<label>
<span>Favorite sport 2:</span>
<select class="validate[required]" multiple="" id="sport2" name="sport2">
<option value="">Choose a sport</option>
<option value="option1">Tennis</option>
<option value="option2">Football</option>
<option value="option3">Golf</option>
</select>
</label>
<br>
validate[required]
</fieldset>
<fieldset>
<legend>
Custom
</legend>
<label>
<p>Comes with many predifined regex (phone, url, ip, email..etc)</p>
<a href="demoRegExp.html">[DEMO]</a>
<br>
<span>Enter a URL : </span>
<input type="text" id="url" name="url" class="validate[required,custom[url]] text-input" value="http://">
<br>
validate[required,custom[url]]
</label>
</fieldset>
<fieldset>
<legend>
Equals
</legend>
<label>
<span>Password : </span>
<input type="password" id="password" name="password" class="validate[required] text-input" value="karnius">
</label>
<label>
<span>Confirm password : </span>
<input type="password" id="password2" name="password2" class="validate[required,equals[password]] text-input" value="kaniusBAD">
<br>
validate[required,equals[password]]
</label>
</fieldset>
<fieldset>
<legend>
Function
</legend>
<label>
<span>Write 'HELLO' : </span>
<input type="text" name="lastname" id="lastname" class="validate[required,funcCall[checkHELLO]] text-input" value="">
<br>
validate[required,funcCall[checkHELLO]]
</label>
</fieldset>
<fieldset>
<legend>
Conditional required
</legend>
<label>
<span>Depending field (1): </span>
<input type="text" id="dep1" name="dep1" class="text-input" value="">
</label>
<label>
<span>This field is required if above field has a value : </span>
<input type="text" id="conditionalrequired1" name="conditionalrequired1" class="validate[condRequired[dep1]] text-input">
<br>
validate[condRequired[dep1]]
</label>
<label>
<br>
<strong>OR with 2 depending fields</strong><br>
<br>
<span>Depending field (2a) : </span>
<input type="text" id="dep2a" name="dep2a" class="text-input" value="">
</label>
<label>
<span>Depending field (2b) : </span>
<input type="text" id="dep2b" name="dep2b" class="text-input" value="">
</label>
<label>
<span>This field is required if any of above fields has a value : </span>
<input type="text" id="conditionalrequired2" name="conditionalrequired2" class="validate[condRequired[dep2a,dep2b]] text-input">
<br>
validate[condRequired[dep2a,dep2b]]
</label>
</fieldset>
<fieldset>
<legend>
MinSize
</legend>
<label>
Minimum field size
<br>
<input type="text" id="minsize" name="minsize" class="validate[required,minSize[6]] text-input" value="">
<br>
validate[required,minSize[6]]
</label>
</fieldset>
<fieldset>
<legend>
MaxSize
</legend>
<label>
Maximum field size, optional
<br>
<input type="text" id="maxsize" name="maxsize" class="validate[optional,maxSize[6]] text-input" value="0123456789">
<br>
validate[maxSize[6]]<br>
note that the field is optional - it won't fail if it has no value
</label>
</fieldset>
<fieldset>
<legend>
Min
</legend>
<label>
integer >= -5
<br>
<input type="text" id="min" name="min" class="validate[required,custom[integer],min[-5]] text-input" value="-7">
<br>
validate[required,custom[integer],min[-5]]
</label>
</fieldset>
<fieldset>
<legend>
Max
</legend>
<label>
integer ,50]
<br>
<input type="text" id="max" name="max" class="validate[required,custom[integer],max[50]] text-input" value="55">
<br>
validate[required,custom[integer],max[50]]
</label>
</fieldset>
<fieldset>
<legend>
Past
</legend>
<label>
Checks that the value is a date in the past
<br>
<span>Please enter a date ealier than 2010/01/01</span>
<input type="text" id="past" name="past" class="validate[custom[date],past[2010/01/01]] text-input" value="2009/06/30">
<br>
validate[custom[date],past[2010/01/01]]
</label>
</fieldset>
<fieldset>
<legend>
Future
</legend>
<label>
Checks that the value is a date in the future
<br>
<span>Please enter a date older than today's date</span>
<input type="text" id="future" name="future" class="validate[custom[date],future[NOW]] text-input" value="2011-01-">
<br>
validate[custom[date],future[NOW]]<br><br>
</label></fieldset>
<fieldset>
<legend>
Group required
</legend>
<label>
Checks if at least one of the input is not empty.
<br>
<br>
<span>Please enter a credit card</span>
</label>
<input type="text" id="creditcard1" name="creditcard1" class="validate[groupRequired[payments]] text-input" value="">
<label><strong>OR</strong></label><br>
<label>Please enter a paypal acccount</label>
<input type="text" id="paypal" name="paypal" class="validate[groupRequired[payments],custom[email]] text-input" value="">
<label><strong>OR</strong></label><br>
<label>Please enter a bank account</label>
<input type="text" id="bank" name="bank" class="validate[groupRequired[payments],custom[integer]] text-input" value="">
<label><strong>OR</strong></label><br>
<label>Please choose from select</label>
<select id="bank2" name="bank2" type="text" class="validate[groupRequired[payments]] text-input">
<option value="">Choose a payment option</option>
<option value="Paypal">Paypal</option>
<option value="Bank">Bank account</option>
</select>
</fieldset>
<fieldset>
<legend>
Date Range<br>
</legend>
<label>
Checks that the start date is before the end date.
Please enter an end date ealier than the start date<br><br>
<label for="date1">Start Date : </label>
<input type="text" id="date1" class="validate[dateRange[grp1]]" value="9/1/2009">
</label>
<label>
<label for="date2">End Date : </label>
<input type="text" id="date2" class="validate[dateRange[grp1]]" value="3/18/1985">
<br>
validate[dateRange[grp1]]<br>
Note* Both fields must have the same name
</label>
</fieldset>
<fieldset>
<label>
<span>Field is required with function : </span>
<input type="text" id="req3" name="req3" class="validate[required, custom[requiredInFunction]] text-input" value="">
</label>
</fieldset>
<fieldset>
<legend>
Date Time Range<br>
</legend>
<label>
Checks that the start date and time are before the end date and time.
Please enter an end date ealier than the start date<br><br>
<label for="date1">Start Date Time: </label>
<input type="text" id="datetime1" class="validate[dateTimeRange[grp2]]" value="9/1/2009 9:30:00 PM">
</label>
<label>
<label for="date2">End Date Time: </label>
<input type="text" id="datetime2" class="validate[dateTimeRange[grp2]]" value="9/1/2009 2:30:00 AM">
<br>
validate[dateTimeRange[grp2]<br>
Note* Both fields must have the same name
</label>
</fieldset>
<fieldset>
<script>
/**
*
* @param {input[type=checkbox]} the checkbox to read
* @param {input[type=textbox]} the field bound to the checkbox that gets enabled or disabled
*/
function ToggleState(checkbox, field) {
if ($(checkbox).attr('checked'))
$(field).attr('disabled', 'disabled');
else
$(field).removeAttr('disabled');
}
</script>
<legend>
Date compare<br>
</legend>
Checks that the first date is before the second date.
Please enter the second date ealier than the first date<br><br>
<label>First Date :<br>
<input type="checkbox" onclick="javascript:ToggleState('#name1', '#dateCmp1');" id="name1" name="name1" class="checkbox">
<i>Disable first date field</i><br>
</label>
<input type="text" id="dateCmp1" name="dateCmp1" class="validate[custom[date],past[#dateCmp2]]" value="2011/3/4">
<br>
validate[custom[date],past[#dateCmp2]]<br><br>
<label>Second Date :<br>
<input type="checkbox" onclick="javascript:ToggleState('#name2', '#dateCmp2');" id="name2" name="name2" class="checkbox">
<i>Disable second date field</i><br>
</label>
<input type="text" id="dateCmp2" name="dateCmp2" class="validate[custom[date],future[#dateCmp1]]" value="2010/1/2">
<br>
validate[custom[date],future[#dateCmp1]]<br>
</fieldset>
<fieldset>
<legend>
Credit Card
</legend>
<label>
Checks that the credit card number is at least theoretically valid, according the to the
<a href="http://en.wikipedia.org/wiki/Luhn_algorithm">Luhn checksum algorithm</a>, but not
whether the specific card number is active with a bank, etc.
<br>
<br>
Since credit cards are often presented in different formats, spaces and
hyphens (' ','-') are simply ignored.
<br>
<br>
Examples:<br>
<ul>
<li>4111 1111 1111 1111</li>
<li>3737-321345-610004</li>
</ul>
<a href="http://www.paypalobjects.com/en_US/vhelp/paypalmanager_help/credit_card_numbers.htm">More examples</a>
<br>
<input type="text" id="creditcard2" name="creditcard2" class="validate[required,creditCard] text-input" value="">
<br>
validate[required,creditCard]
</label>
</fieldset>
<fieldset>
<legend>
Checkbox
</legend>
<label>
Check this <a href="demoCheckBox.html">[DEMO]</a>
</label>
</fieldset>
<fieldset>
<legend>
Ajax
</legend>
<label>
Check this <a href="demoAjaxSubmitPHP.html">[DEMO]</a>
</label>
</fieldset>
<input type="submit" value="Validate & Send the form!" class="submit"><hr>
</form>
</body></html>
