easyui-validatebox vs easyui-dialog

[mzeddd]

Hi,

When I use some data forms with validatebox elements inside easyui-dialog I see problem with "This field is required." message.

In case if I 'close' dialog when some fields are still not valid I could see "This field is required." message even if I don't see field itself.

Code:

<div id="documentHandlingDialog" class="easyui-dialog" title="Document Handling"
		style="padding:5px;width:390px;height:150px;overflow:hidden"
		buttons="#documentHandlingDialog-buttons"
		data-options="modal:true" closed="true" inline="false">
	<form id="dhForm" >
		<input type="hidden" name="id" id="id" value="" />
		<input type="hidden" name="docConn" id="docConn" value="" />
		<table>
			<tr><td>Document type:</td><td><input type="text" name="docType" id="docType" class="easyui-validatebox" required="true" style="width:200px;"></td></tr>
			<tr><td>Document reference:</td><td><input type="text" name="docRef" id="docRef" class="easyui-validatebox" required="true" style="width:200px;"></td></tr>
		</table>
	</form>
</div>

It is visible with 1.3.2, 1.3.1, ... versions.

I think it is bug but hope any workaround exists.

[stworthy]

There are two ways to solve this issue. One is add 'novalidate' attribute to the form element.

Code:

<form id="dhForm" novalidate>
...
</form>

Another way is to use 'data-options' attribute to define 'required' property on fields instead of defining 'required' attribute directly on fields.

Code:

<input type="text" name="docType" id="docType" class="easyui-validatebox" data-options="required: true" style="width:200px;">

[mzeddd]

No, it does not help

[stworthy]

Since I try closing dialog with the code you provided, however, I could not replicate this issue. Could you tell how to replicate your issue? A demo page or a link to demonstrate this issue may be more appropriate.

[mzeddd]

No idea why, but it is reproducible only on live site running on web server as simple as 1-2-3.

When I save HTML of this 'strange' page and try to play with it I could not get this problem at all.

This 'strange' page consist of some layout, tab, tree elements.

Any ideas?

[mzeddd]

Hi stworthy,

Here is the working example where this problem is visible http://butwhatif.info/validatebox.html

[stworthy]

Here is your code:

Code:

function openDialog(action){
	$('#inputForm').form('clear');
	$('#myDialog').dialog('open');
}

Please replace it with

Code:

function openDialog(action){
	$('#myDialog').dialog('open');
	$('#inputForm').form('clear');
}