Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
86 lines (81 sloc) 3.54 KB
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta charset="utf-8"/>
<title>An Example Widgets Form</title>
<script type="text/javascript" src=""><!-- --></script>
<script type="text/javascript" src=""><!-- --></script>
<script type="text/javascript" src="widgets2.js"><!-- --></script>
<script type="text/javascript">
<link type="text/css" rel="stylesheet" href="" />
h3 { color:green; }
label.validation-err-msg {
color: red;
<div class="widget-form" style="padding:1em;"
<h3>Simple Validation Tests</h3>
Required*: <input type="text" id="required"/>
<label for="required" class="validation-err-msg"
data-validation-rule="test(notEmpty);when(onBlur, onChange);">
This is a required field!
Length greater than 3 characters: <input type="text" id="gt3"/>
<label class="validation-err-msg"
data-validation-rule="for(gt3);test(lengt(3));when(onBlur, onChange);">
Must have more than 3 characters!
yes or no only: <input type="text" id="yesno"/>
<label for="yesno" data-validation-rule="test(='yes' or ='no');when(onBlur);">
Must be the value 'yes' or 'no' only!
Numbers only*: <input type="text" id="numonly"/>
<label for="numonly" class="validation-err-msg"
data-validation-rule="test(/^\d*$/);when(onBlur, onChange);">
Only numbers are valid here!
<h3>More Validation Samples</h3>
Required A: <input id="a" class="ab" type="text" data-validation-rule="test(notEmpty);name(testA);"/>
OR B:<input id="b" class="ab" type="text" data-validation-rule="test(notEmpty);name(testB);"/>
<label class="validation-err-msg"
data-validation-rule="livefor(.ab);when(onBlur);test(testA or testB);"
>A or B is a required field!</label>
Either D: <input id="d" class="de" type="text" data-validation-rule="test(notEmpty);name(testD);"/>
OR E:<input id="e" class="de" type="text" data-validation-rule="test(notEmpty);name(testE);"/>
<label class="validation-err-msg"
data-validation-rule="livefor(.de);when(onBlur);test((testD or testE) and not (testD and testE));"
>Either D or E is a required field (But not both)!</label>
No validation: <input type="text" id="??"/>
<button class="form-fields-save">Save</button> <!-- just for tiggering the onSave event -->