^1374054922431
@xworker.html.jqueryesayui.form.validatebox
sname
validatebox
slabel
validatebox
sdescriptors
xworker.lang.MetaDescriptor3
sextends
xworker.html.jqueryesayui.EasyUIThing
smany
true
seditCols
2
sinitialization
false
smodifier
public
sinheritDescription
false
Sdescription
#$@text#$@
<p style="text-align: left;">Override defaults with $.fn.validatebox.defaults.</p>

<p style="text-align: left;">The validatebox is designed to validate the form input fields. If users enter invalid values, it will change the background color, display the alarm icon and a tooltip message. The validatebox can be integrated with form plugin and will prevent invalid fields from submission.</p>

<p><img src="http://www.jeasyui.com/documentation/images/validatebox.png" style="-webkit-text-stroke-width:0px; background-color:rgb(255, 255, 255); color:rgb(0, 0, 0); font-size-adjust:none; font-stretch:normal; font:14px/normal verdana, helvetica, arial, sans-serif; letter-spacing:normal; text-align:left; text-indent:0px; text-transform:none; white-space:normal; word-spacing:0px" /></p>

<h4 style="text-align: left;">Dependencies</h4>

<ul>
	<li>tooltip</li>
</ul>

<h4 style="text-align: left;">Usage</h4>

<p style="text-align: left;">Create validatebox from markup.</p>

<div class="dp-highlighter" style="font: 12px/normal Consolas, &quot;Courier New&quot;, Courier, mono; padding: 1px; width: 1584px; text-align: left; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; overflow: auto; margin-left: 9px; word-spacing: 0px; white-space: normal; word-break: break-all; word-wrap: break-word; font-size-adjust: none; font-stretch: normal; background-color: rgb(255, 255, 255); -webkit-text-stroke-width: 0px;">
<div class="bar" style="font-size: 14px;">
<div class="tools" style="margin: 0px; padding: 3px; text-align: left; color: black; font-size: 14px;">&nbsp;</div>
</div>

<ol start="1">
	<li><span style="color:black; font-size:14px"><strong>&lt;</strong><strong>input</strong><span style="color:black; font-size:14px">&nbsp;</span><span style="color:red; font-size:14px">id</span><span style="color:black; font-size:14px">=</span><span style="color:blue; font-size:14px">&quot;vv&quot;</span><span style="color:black; font-size:14px">&nbsp;</span><span style="color:red; font-size:14px">class</span><span style="color:black; font-size:14px">=</span><span style="color:blue; font-size:14px">&quot;easyui-validatebox&quot;</span><span style="color:black; font-size:14px">&nbsp;</span><span style="color:red; font-size:14px">data-options</span><span style="color:black; font-size:14px">=</span><span style="color:blue; font-size:14px">&quot;required:true,validType:&#39;email&#39;&quot;</span><span style="color:black; font-size:14px">&nbsp;</span><strong>/&gt;</strong><span style="color:black; font-size:14px">&nbsp;&nbsp;</span></span></li>
</ol>
</div>

<p style="text-align: left;">Create validatebox using javascript.</p>

<div class="dp-highlighter" style="font: 12px/normal Consolas, &quot;Courier New&quot;, Courier, mono; padding: 1px; width: 1584px; text-align: left; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; overflow: auto; margin-left: 9px; word-spacing: 0px; white-space: normal; word-break: break-all; word-wrap: break-word; font-size-adjust: none; font-stretch: normal; background-color: rgb(255, 255, 255); -webkit-text-stroke-width: 0px;">
<div class="bar" style="font-size: 14px;">
<div class="tools" style="margin: 0px; padding: 3px; text-align: left; color: black; font-size: 14px;">&nbsp;</div>
</div>

<ol start="1">
	<li><span style="color:black; font-size:14px"><strong>&lt;</strong><strong>input</strong><span style="color:black; font-size:14px">&nbsp;</span><span style="color:red; font-size:14px">id</span><span style="color:black; font-size:14px">=</span><span style="color:blue; font-size:14px">&quot;vv&quot;</span><span style="color:black; font-size:14px">&nbsp;</span><strong>/&gt;</strong><span style="color:black; font-size:14px">&nbsp;&nbsp;</span></span></li>
</ol>
</div>

<div class="dp-highlighter" style="font: 12px/normal Consolas, &quot;Courier New&quot;, Courier, mono; padding: 1px; width: 1584px; text-align: left; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; overflow: auto; margin-left: 9px; word-spacing: 0px; white-space: normal; word-break: break-all; word-wrap: break-word; font-size-adjust: none; font-stretch: normal; background-color: rgb(255, 255, 255); -webkit-text-stroke-width: 0px;">
<div class="bar" style="font-size: 14px;">
<div class="tools" style="margin: 0px; padding: 3px; text-align: left; color: black; font-size: 14px;">&nbsp;</div>
</div>

<ol start="1">
	<li><span style="color:black; font-size:14px"><span style="color:black; font-size:14px">$(</span><span style="color:blue; font-size:14px">&#39;#vv&#39;</span><span style="color:black; font-size:14px">).validatebox({&nbsp;&nbsp;</span></span></li>
	<li><span style="color:black; font-size:14px">&nbsp;&nbsp;&nbsp;&nbsp;required:&nbsp;<strong>true</strong><span style="color:black; font-size:14px">,&nbsp;&nbsp;</span></span></li>
	<li><span style="color:black; font-size:14px">&nbsp;&nbsp;&nbsp;&nbsp;validType:&nbsp;<span style="color:blue; font-size:14px">&#39;email&#39;</span><span style="color:black; font-size:14px">&nbsp;&nbsp;</span></span></li>
	<li><span style="color:black; font-size:14px">});&nbsp;&nbsp;</span></li>
</ol>
</div>

<p style="text-align: left;">To check password and retype password are same.</p>

<div class="dp-highlighter" style="font: 12px/normal Consolas, &quot;Courier New&quot;, Courier, mono; padding: 1px; width: 1584px; text-align: left; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; overflow: auto; margin-left: 9px; word-spacing: 0px; white-space: normal; word-break: break-all; word-wrap: break-word; font-size-adjust: none; font-stretch: normal; background-color: rgb(255, 255, 255); -webkit-text-stroke-width: 0px;">
<div class="bar" style="font-size: 14px;">
<div class="tools" style="margin: 0px; padding: 3px; text-align: left; color: black; font-size: 14px;">&nbsp;</div>
</div>

<ol start="1">
	<li><span style="color:black; font-size:14px"><span style="color:rgb(0, 130, 0); font-size:14px">//&nbsp;extend&nbsp;the&nbsp;&#39;equals&#39;&nbsp;rule</span><span style="color:black; font-size:14px">&nbsp;&nbsp;</span></span></li>
	<li><span style="color:black; font-size:14px">$.extend($.fn.validatebox.defaults.rules,&nbsp;{&nbsp;&nbsp;</span></li>
	<li><span style="color:black; font-size:14px">&nbsp;&nbsp;&nbsp;&nbsp;equals:&nbsp;{&nbsp;&nbsp;</span></li>
	<li><span style="color:black; font-size:14px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;validator:&nbsp;<strong>function</strong><span style="color:black; font-size:14px">(value,param){&nbsp;&nbsp;</span></span></li>
	<li><span style="color:black; font-size:14px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>return</strong><span style="color:black; font-size:14px">&nbsp;value&nbsp;==&nbsp;$(param[0]).val();&nbsp;&nbsp;</span></span></li>
	<li><span style="color:black; font-size:14px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;&nbsp;</span></li>
	<li><span style="color:black; font-size:14px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;message:&nbsp;<span style="color:blue; font-size:14px">&#39;Field&nbsp;do&nbsp;not&nbsp;match.&#39;</span><span style="color:black; font-size:14px">&nbsp;&nbsp;</span></span></li>
	<li><span style="color:black; font-size:14px">&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</span></li>
	<li><span style="color:black; font-size:14px">});&nbsp;&nbsp;</span></li>
</ol>
</div>

<div class="dp-highlighter" style="font: 12px/normal Consolas, &quot;Courier New&quot;, Courier, mono; padding: 1px; width: 1584px; text-align: left; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; overflow: auto; margin-left: 9px; word-spacing: 0px; white-space: normal; word-break: break-all; word-wrap: break-word; font-size-adjust: none; font-stretch: normal; background-color: rgb(255, 255, 255); -webkit-text-stroke-width: 0px;">
<div class="bar" style="font-size: 14px;">
<div class="tools" style="margin: 0px; padding: 3px; text-align: left; color: black; font-size: 14px;">&nbsp;</div>
</div>

<ol start="1">
	<li><span style="color:black; font-size:14px"><strong>&lt;</strong><strong>input</strong><span style="color:black; font-size:14px">&nbsp;</span><span style="color:red; font-size:14px">id</span><span style="color:black; font-size:14px">=</span><span style="color:blue; font-size:14px">&quot;pwd&quot;</span><span style="color:black; font-size:14px">&nbsp;</span><span style="color:red; font-size:14px">name</span><span style="color:black; font-size:14px">=</span><span style="color:blue; font-size:14px">&quot;pwd&quot;</span><span style="color:black; font-size:14px">&nbsp;</span><span style="color:red; font-size:14px">type</span><span style="color:black; font-size:14px">=</span><span style="color:blue; font-size:14px">&quot;password&quot;</span><span style="color:black; font-size:14px">&nbsp;</span><span style="color:red; font-size:14px">class</span><span style="color:black; font-size:14px">=</span><span style="color:blue; font-size:14px">&quot;easyui-validatebox&quot;</span><span style="color:black; font-size:14px">&nbsp;</span><span style="color:red; font-size:14px">data-options</span><span style="color:black; font-size:14px">=</span><span style="color:blue; font-size:14px">&quot;required:true&quot;</span><span style="color:black; font-size:14px">&nbsp;</span><strong>/&gt;</strong><span style="color:black; font-size:14px">&nbsp;&nbsp;</span></span></li>
	<li><span style="color:black; font-size:14px"><strong>&lt;</strong><strong>input</strong><span style="color:black; font-size:14px">&nbsp;</span><span style="color:red; font-size:14px">id</span><span style="color:black; font-size:14px">=</span><span style="color:blue; font-size:14px">&quot;rpwd&quot;</span><span style="color:black; font-size:14px">&nbsp;</span><span style="color:red; font-size:14px">name</span><span style="color:black; font-size:14px">=</span><span style="color:blue; font-size:14px">&quot;rpwd&quot;</span><span style="color:black; font-size:14px">&nbsp;</span><span style="color:red; font-size:14px">type</span><span style="color:black; font-size:14px">=</span><span style="color:blue; font-size:14px">&quot;password&quot;</span><span style="color:black; font-size:14px">&nbsp;</span><span style="color:red; font-size:14px">class</span><span style="color:black; font-size:14px">=</span><span style="color:blue; font-size:14px">&quot;easyui-validatebox&quot;</span><span style="color:black; font-size:14px">&nbsp;&nbsp;&nbsp;</span></span></li>
	<li><span style="color:black; font-size:14px">&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:red; font-size:14px">required</span><span style="color:black; font-size:14px">=</span><span style="color:blue; font-size:14px">&quot;required&quot;</span><span style="color:black; font-size:14px">&nbsp;</span><span style="color:red; font-size:14px">validType</span><span style="color:black; font-size:14px">=</span><span style="color:blue; font-size:14px">&quot;equals[&#39;#pwd&#39;]&quot;</span><span style="color:black; font-size:14px">&nbsp;</span><strong>/&gt;</strong><span style="color:black; font-size:14px">&nbsp;&nbsp;</span></span></li>
</ol>
</div>

<p><br />
&nbsp;</p>

<h4 style="text-align: left;">Validate Rule</h4>

<p style="text-align: left;">The validate rule is defined by using required and validType property, here are the rules already implemented:</p>

<ul>
	<li>email: Match email regex rule.</li>
	<li>url: Match URL regex rule.</li>
	<li>length[0,100]: Between x and x characters allowed.</li>
	<li>remote[&#39;http://.../action.do&#39;,&#39;paramName&#39;]: Send ajax request to do validate value, return &#39;true&#39; when successfully.</li>
</ul>

<p style="text-align: left;">To custom validate rule, override $.fn.validatebox.defaults.rules that defines a validator function and invalid message. For example, to define a minLength valid type:</p>

<div class="dp-highlighter" style="font: 12px/normal Consolas, &quot;Courier New&quot;, Courier, mono; padding: 1px; width: 1584px; text-align: left; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; overflow: auto; margin-left: 9px; word-spacing: 0px; white-space: normal; word-break: break-all; word-wrap: break-word; font-size-adjust: none; font-stretch: normal; background-color: rgb(255, 255, 255); -webkit-text-stroke-width: 0px;">
<div class="bar" style="font-size: 14px;">
<div class="tools" style="margin: 0px; padding: 3px; text-align: left; color: black; font-size: 14px;">&nbsp;</div>
</div>

<ol start="1">
	<li><span style="color:black; font-size:14px"><span style="color:black; font-size:14px">$.extend($.fn.validatebox.defaults.rules,&nbsp;{&nbsp;&nbsp;</span></span></li>
	<li><span style="color:black; font-size:14px">&nbsp;&nbsp;&nbsp;&nbsp;minLength:&nbsp;{&nbsp;&nbsp;</span></li>
	<li><span style="color:black; font-size:14px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;validator:&nbsp;<strong>function</strong><span style="color:black; font-size:14px">(value,&nbsp;param){&nbsp;&nbsp;</span></span></li>
	<li><span style="color:black; font-size:14px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>return</strong><span style="color:black; font-size:14px">&nbsp;value.length&nbsp;&gt;=&nbsp;param[0];&nbsp;&nbsp;</span></span></li>
	<li><span style="color:black; font-size:14px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;&nbsp;</span></li>
	<li><span style="color:black; font-size:14px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;message:&nbsp;<span style="color:blue; font-size:14px">&#39;Please&nbsp;enter&nbsp;at&nbsp;least&nbsp;{0}&nbsp;characters.&#39;</span><span style="color:black; font-size:14px">&nbsp;&nbsp;</span></span></li>
	<li><span style="color:black; font-size:14px">&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</span></li>
	<li><span style="color:black; font-size:14px">});&nbsp;&nbsp;</span></li>
</ol>
</div>

<p style="text-align: left;">Now you can use the minLength validtype to define an input box that should be inputed at least 5 characters:</p>

<div class="dp-highlighter" style="font: 12px/normal Consolas, &quot;Courier New&quot;, Courier, mono; padding: 1px; width: 1584px; text-align: left; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; overflow: auto; margin-left: 9px; word-spacing: 0px; white-space: normal; word-break: break-all; word-wrap: break-word; font-size-adjust: none; font-stretch: normal; background-color: rgb(255, 255, 255); -webkit-text-stroke-width: 0px;">
<div class="bar" style="font-size: 14px;">
<div class="tools" style="margin: 0px; padding: 3px; text-align: left; color: black; font-size: 14px;">&nbsp;</div>
</div>

<ol start="1">
	<li><span style="color:black; font-size:14px"><strong>&lt;</strong><strong>input</strong><span style="color:black; font-size:14px">&nbsp;</span><span style="color:red; font-size:14px">class</span><span style="color:black; font-size:14px">=</span><span style="color:blue; font-size:14px">&quot;easyui-validatebox&quot;</span><span style="color:black; font-size:14px">&nbsp;</span><span style="color:red; font-size:14px">data-options</span><span style="color:black; font-size:14px">=</span><span style="color:blue; font-size:14px">&quot;validType:&#39;minLength[5]&#39;&quot;</span><strong>&gt;</strong><span style="color:black; font-size:14px">&nbsp;&nbsp;</span></span></li>
</ol>
</div>
#$@text#$@
sth_createIndex
false
sth_mark
false
@xworker.html.jqueryesayui.form.validatebox/@required
sname
required
sinputtype
truefalse
sshowLabel
true
sgroup
validatebox
sreadOnly
false
sdefault
false
sinheritDescription
false
sdescription
<p><span style="background-color:rgb(255, 255, 255); color:rgb(0, 0, 0)">Defines if the field should be inputed.</span></p>
svalidateAllowBlank
true
LvalidateOnBlur
true
LallowDecimals
true
LallowNegative
true
sdescriptors
xworker.lang.MetaDescriptor3/@attribute
sth_createIndex
false
sth_mark
false
@xworker.html.jqueryesayui.form.validatebox/@validType
sname
validType
sshowLabel
true
ssize
60
sgroup
validatebox
sreadOnly
false
sinheritDescription
false
Sdescription
#$@text#$@
<p><span style="background-color:rgb(255, 255, 255); color:rgb(0, 0, 0)">Defines the field valid type, such as email, url, etc. Possible values are:</span><br />
<span style="background-color:rgb(255, 255, 255); color:rgb(0, 0, 0)">1) a valid type string, apply a single validate rule.</span><br />
<span style="background-color:rgb(255, 255, 255); color:rgb(0, 0, 0)">2) an valid type array, apply multiple validate rules. The multiple validate rules on a field are available since version 1.3.2.</span></p>

<p style="text-align: left;">Code example:</p>

<pre style="text-align: left;">
&lt;input class=&quot;easyui-validatebox&quot; data-options=&quot;required:true,validType:&#39;url&#39;&quot;&gt;
&lt;input class=&quot;easyui-validatebox&quot; data-options=&quot;
	required:true,
	validType:[&#39;email&#39;,&#39;length[0,20]&#39;]
&quot;&gt;</pre>
#$@text#$@
svalidateAllowBlank
true
LvalidateOnBlur
true
LallowDecimals
true
LallowNegative
true
sdescriptors
xworker.lang.MetaDescriptor3/@attribute
sth_createIndex
false
sth_mark
false
@xworker.html.jqueryesayui.form.validatebox/@delay
sname
delay
sshowLabel
true
sgroup
validatebox
sreadOnly
false
sdefault
200
sinheritDescription
false
sdescription
<p><span style="background-color:rgb(255, 255, 255); color:rgb(0, 0, 0)">Delay to validate from the last inputting value. This property is available since version 1.3.2.</span></p>
svalidateAllowBlank
true
LvalidateOnBlur
true
LallowDecimals
true
LallowNegative
true
sdescriptors
xworker.lang.MetaDescriptor3/@attribute
sth_createIndex
false
sth_mark
false
@xworker.html.jqueryesayui.form.validatebox/@missingMessage
sname
missingMessage
sshowLabel
true
ssize
60
sgroup
validatebox
sreadOnly
false
sdefault
'This field is required.'
sinheritDescription
false
sdescription
<p><span style="background-color:rgb(255, 255, 255); color:rgb(0, 0, 0)">Tooltip text that appears when the content of text box is invalid.</span></p>
svalidateAllowBlank
true
LvalidateOnBlur
true
LallowDecimals
true
LallowNegative
true
sdescriptors
xworker.lang.MetaDescriptor3/@attribute
sth_createIndex
false
sth_mark
false
@xworker.html.jqueryesayui.form.validatebox/@invalidMessage
sname
invalidMessage
sshowLabel
true
ssize
60
sgroup
validatebox
sreadOnly
false
sinheritDescription
false
sdescription
<p><span style="background-color:rgb(255, 255, 255); color:rgb(0, 0, 0)">ooltip text that appears when the content of text box is invalid.</span></p>
svalidateAllowBlank
true
LvalidateOnBlur
true
LallowDecimals
true
LallowNegative
true
sdescriptors
xworker.lang.MetaDescriptor3/@attribute
sth_createIndex
false
sth_mark
false
@xworker.html.jqueryesayui.form.validatebox/@tipPosition
sname
tipPosition
sinputtype
inputSelect
sshowLabel
true
sgroup
validatebox
sreadOnly
false
sdefault
'right'
sinheritDescription
false
Sdescription
#$@text#$@
<table class="doc-table" style="-webkit-text-stroke-width:0px; background-color:rgb(255, 255, 255); border-collapse:collapse; border-spacing:0px; color:rgb(0, 0, 0); font-size-adjust:none; font-stretch:normal; font:14px/normal verdana, helvetica, arial, sans-serif; letter-spacing:normal; margin-left:9px; text-align:left; text-indent:0px; text-transform:none; white-space:normal; word-spacing:0px">
	<tbody>
		<tr>
			<td>Defines the position of tip message when the content of text box is invalid. Possible values: &#39;left&#39;,&#39;right&#39;. This property is available since version 1.3.2.</td>
		</tr>
	</tbody>
</table>
#$@text#$@
svalidateAllowBlank
true
LvalidateOnBlur
true
LallowDecimals
true
LallowNegative
true
sdescriptors
xworker.lang.MetaDescriptor3/@attribute
sth_createIndex
false
sth_mark
false
@xworker.html.jqueryesayui.form.validatebox/@tipPosition/@left
sname
left
svalue
'left'
sdescriptors
xworker.lang.MetaDescriptor3/@attribute/@value
sth_createIndex
false
sth_mark
false
@xworker.html.jqueryesayui.form.validatebox/@tipPosition/@right
sname
right
svalue
'right'
sdescriptors
xworker.lang.MetaDescriptor3/@attribute/@value
sth_createIndex
false
sth_mark
false
@xworker.html.jqueryesayui.form.validatebox/@deltaX
sname
deltaX
sshowLabel
true
sgroup
validatebox
sreadOnly
false
sinheritDescription
false
sdescription
<p><span style="background-color:rgb(255, 255, 255); color:rgb(0, 0, 0)">Tooltip offset in the X direction. This property is available since version 1.3.3.</span></p>
svalidateAllowBlank
true
LvalidateOnBlur
true
LallowDecimals
true
LallowNegative
true
sdescriptors
xworker.lang.MetaDescriptor3/@attribute
sth_createIndex
false
sth_mark
false
