JQuery - ValidationEngine: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
 
(3 dazwischenliegende Versionen von einem anderen Benutzer werden nicht angezeigt)
Zeile 1: Zeile 1:
 
Mächtiges und recht einfaches JavaScript Tool zur Validierung von Formularen. Fehleranzeige in Sprechblasen direkt am Eingabefeld.
 
Mächtiges und recht einfaches JavaScript Tool zur Validierung von Formularen. Fehleranzeige in Sprechblasen direkt am Eingabefeld.
 +
== Links ==
 +
http://posabsolute.github.io/jQuery-Validation-Engine/
  
 
==Quickstart==
 
==Quickstart==
Zeile 18: Zeile 20:
 
Ein paar Beispiele von: http://it.post80s.com/jquery-form-validation (Zugriff 2013-08)
 
Ein paar Beispiele von: http://it.post80s.com/jquery-form-validation (Zugriff 2013-08)
  
−
<pre>
+
'''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.
−
//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 value="" class="validate[groupRequired[payments]]" type="text" name="creditcard" id="creditcard" />
−
<input class="validate[groupRequired[payments]]" type="text" id="paypal" name="paypal"/>
+
<input class="validate[groupRequired[payments]]" type="text" id="paypal" name="paypal"/>
  
−
The following example, enforces a minimum of two selected checkboxes
+
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="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="maxcheck2" value="3"/>
−
<input class="validate[minCheckbox[2]]" type="checkbox" name="group1" id="maxcheck3" value="9"/>
+
<input class="validate[minCheckbox[2]]" type="checkbox" name="group1" id="maxcheck3" value="9"/>
 
   
 
   
 
Note how the input.name is identical across the fields.
 
Note how the input.name is identical across the fields.
  
−
// radios
+
'''Radios'''
−
<input id="radio1" class="validate[required] radio" type="radio" value="5" name="group0">
+
<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="radio2" class="validate[required] radio" type="radio" value="3" name="group0">
+
  <input id="radio3" class="validate[required] radio" type="radio" value="9" name="group0">
−
   
 
−
<input id="radio3" class="validate[required] radio" type="radio" value="9" name="group0">
 
  
−
// Password fields
+
'''Password fields'''
−
<input type="password" name="NewPwd" id="NewPwd" value="123" class="validate[required] text-input">
+
<input type="password" name="NewPwd" id="NewPwd" value="123" class="validate[required] text-input">
−
   
+
  <input type="password"
−
<input type="password"
+
name="NewPwd2" id="NewPwd2" class="validate[required,equals[NewPwd]] text-input">
−
name="NewPwd2" id="NewPwd2" class="validate[required,equals[NewPwd]] text-input">
 
−
</pre>
 
  
−
<pre>
 
  
−
You can run other functions after the form is validated and before the form is submitted:
+
You can run '''other functions''' after the form is validated and before the form is submitted:
 
<pre>
 
<pre>
 
<script type="text/javascript">
 
<script type="text/javascript">
 
jQuery(document).ready(function(){
 
jQuery(document).ready(function(){
−
 
 
     jQuery("#fCompanyEdit").validationEngine({
 
     jQuery("#fCompanyEdit").validationEngine({
 
         promptPosition : "centerRight"
 
         promptPosition : "centerRight"
Zeile 61: Zeile 56:
 
      
 
      
 
     });
 
     });
−
 
 
});
 
});
−
</pre>
 
 
</script>
 
</script>
 
</pre>
 
</pre>
 +
 +
=== Ausführliches Beispiel ===
 +
<syntaxhighlight lang="html5">
 +
<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 &amp; 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 &gt;= -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 &amp; Send the form!" class="submit"><hr>
 +
</form>
 +
 +
 +
</body></html>
 +
</syntaxhighlight>

Aktuelle Version vom 24. September 2015, 17:30 Uhr

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 &amp; 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 &gt;= -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 &amp; Send the form!" class="submit"><hr>
	</form>


</body></html>
Abgerufen von „https://wiki.stephanschlegel.de/index.php?title=JQuery_-_ValidationEngine&oldid=21173“