Validation in popup editing jqxWindow

[anseltimMember]

Hi,

I want to use the jqxValidator on a jqxWindow popup editing window. When I try this, I get an \”a(c).attr(\”type\”) is undefined\” error in the jqxvalidator.js file. I\’m not sure what I\’m doing wrong. My pertinent code is below.

Popup jqxWindow:

<code><form id=popUpForm >
		<div id=\"dataPopupWindowId\" style=\"display: none;\">
		
			<div>BOM Template</div>
			<div style=\"overflow: hidden;\">
			<div id=\"id\"></div>
			<div id=\"dateIntroduced\"></div>
				<table>
					<tr>
						<td align=\"right\">Product Name:</td>
						<td align=\"left\"><input id=\"productName\" /></td>
					</tr>
					<tr>
						<td align=\"right\">Description:</td>
						<td align=\"left\"><input id=\"description\" /></td>
					</tr>
					<tr>
						<td align=\"right\"></td>
						<td style=\"padding-top: 10px;\" align=\"right\">
							<input style=\"margin-right: 5px;\" type=\"button\" id=\"saveBtnId\" value=\"Save\" />
							<input id=\"cancelBtnId\" type=\"button\" value=\"Cancel\" />
							</td>
							
					</tr>
				</table>
			</div>
		</div>
		</form></code>

Save button code:

$(\"#saveBtnId\").click(function (event) {

$(\'#popUpForm \').jqxValidator(\'validate\');

var row = {
productName: $(\"#productName\").val(),
description: $(\"#description\").val(),
};

$(\"#jqxgrid\").jqxGrid(\'beginupdate\');
// Determine if New or Edit
if (isEdit){
$(\'#jqxgrid\').jqxGrid(\'updaterow\', editrow, row);
}else{
$(\'#jqxgrid\').jqxGrid(\'addrow\', null, row);
}
$(\"#dataPopupWindowId\").jqxWindow(\'hide\');
$(\"#jqxgrid\").jqxGrid(\'resumeupdate\');
$(\"#jqxgrid\").jqxGrid(\'updatebounddata\');
//}
});

Popup window handler:

$(\"#addBtn\").click(function() {
// clear values
$(\"#productName\").val(\"\");
$(\"#description\").val(\"\");

$(\'#popUpForm\').jqxValidator({
rules: [
{ input: \'#productName\', message: \'Product Name is required!\', action: \'keyup, blur\', rule: \'required\' }
], theme: theme
});

isEdit = false;

var offset = $(\"#jqxgrid\").offset();

$(\"#dataPopupWindowId\").jqxWindow({
position: { x: parseInt(offset.left) + 80, y: parseInt(offset.top) - 150},
height: 570,
width: 350,
theme: theme,
resizable: false,
isModal: true,
modalOpacity: 0.3,
});
$(\"#dataPopupWindowId\").css(\'z-index\', 9999);
$(\"#dataPopupWindowId\").jqxWindow(\'show\');
});


Thanks!

Tim

[Peter StoevKeymaster]

Hi Tim,

In the current version of jqxValidator, all of the Form’s input fields must have a type attribute specified. I suggest you to set the ‘type’ to ‘text’ of your productName and description input fields.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[anseltimMember]

Thanks Peter, that did the trick.

Now I need to validate dropdowns where the selectedIndex = -1, how do I go about doing that?

Thanks again!

Tim

[anseltimMember]

One more thing….. I have the validation popups working, but they do not stop the action – the updaterow or addrow methods are still called. What am I still missing?

Thanks!

Tim

[Peter StoevKeymaster]

Hi Tim,

The jqxValidator will just display hints that the data is not valid. If you display it in a popup window, you should not allow your users to leave the popup window until valid values are entered. A possible solution is to disable a button which closes the window, hide the window’s default close button.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[anseltimMember]

Thanks Peter – I am now working with the validationSuccess & validationError events that set a property allowing the user to continue or not.

Thanks for the fast feedback – I appreciate it!

Tim

[Author]

Posts