Thursday, 5 September 2013

Jquery validation on modal popup

Jquery validation on modal popup

I have found a few topics on this matter, but none of them fits my needs,
or solves my problem. So this is the on the main page:
<div id="contentDiv">
<div style="margin-top: -31px;">
<form>
<table class="tableFormLayout" cellpadding="0" cellspacing="0">
<tr>
<td>
<input type="button" id="openOrderItemAddPopup"
value="Add" />
</td>
</tr>
</table>
@Html.Partial("~/Views/Orders/OrderItemAddPopup.cshtml", Model)
</form>
</div>
</div>
And this in the popup:
@model MvcAppMobileJQuery.ViewModels.OrderVM
<script src="@Url.Content("~/Scripts/jquery.validate.js")"
type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")"
type="text/javascript"></script>
<div data-role="none" id="OrderItemAddPopup" data-overlay-theme="b"
style="width: 500px;"
class="ui-corner-all">
<div data-role="content">
@Html.ValidationSummary()
<form id="#orderitemsform">
<table class="tableFormLayout" cellpadding="0" cellspacing="0">
<tr>
<td>
@Html.LabelFor(m => m.Quantity, new {@class =
"label"})
</td>
<td>
@Html.TextBoxFor(m => m.Quantity, new {data_mini =
"true", type = "number", id = "txtQuantity"})
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" id="load" data-inline="true"
value="Save" data-icon="forward"/>
</td>
</tr>
</table>
</form>
</div>
</div>
<script type="text/javascript">
$('#load').click(function () {
$('#orderitemsform').validate();
if ($('#orderitemsform').valid()) {
alert("valid");
}
else {
alert("invalid");
}
});
$(function () {
$('#OrderItemAddPopup').modalPopLite({ openButton:
'#openOrderItemAddPopup', closeButton: '#closeOrderItemAddPopup',
isModal: true });
});
</script>
And the viewmodel:
public class OrderVM
{
[DisplayName("Quantiy")]
[Required(ErrorMessage = "Quantity is required")]
[RegularExpression("^[1-9]\\d*$", ErrorMessage = "Quantity must be
positive")]
public int Quantity { get; set; }
}
The problem is that I an error in the console: Uncaught TypeError: Cannot
read property 'form' of undefined
If I change this:
$("#orderitemsform").validate();
if ($("#orderitemsform").valid()) {
to this:
$('form').validate();
if ($('form').valid()) {
it works, but it also validates the form on the main window, which I don't
want at this point.

No comments:

Post a Comment