title: jquery jqgrid validate error on form submit after create dialog box is shown
body: <p>I'm using jqgrid with MVC 3.</p>
  
  <p>I have this pages whose code is shown below:</p>
  
  <pre><code>@model VectorCheck.ViewModels.InsertUpdateInvoiceViewModel
  @{
      ViewBag.Title = "Edit Invoice " + @Model.Invoice.InvoiceNumber;
      ViewBag.InvoiceId = (int)@Model.Invoice.InvoiceId;
  }
  &lt;header class="controllerheader"&gt;
      &lt;h1&gt;Edit Invoice @Model.Invoice.InvoiceNumber&lt;/h1&gt;
  &lt;/header&gt;
  
  &lt;script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="@Url.Content("~/Scripts/jquery-ui-1.8.16.min.js")" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="@Url.Content("~/Scripts/EditorHookup.js")" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;link rel="stylesheet" type="text/css" media="screen" href="../../Scripts/jquery.jqGrid-4.1.1/css/ui.jqgrid.css" /&gt;
  
  &lt;script src="../../Scripts/jquery.jqGrid-4.1.1/js/i18n/grid.locale-en.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;script src="../../Scripts/jquery.jqGrid-4.1.1/js/jquery.jqGrid.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;script src="../../Scripts/Views/Invoice/create.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;script src="../../Scripts/Views/Invoice/edit.js" type="text/javascript"&gt;&lt;/script&gt;
  @using (Html.BeginForm()) {
      @Html.ValidationSummary()
      &lt;input type="hidden" id="invoiceid" value="@Model.Invoice.InvoiceId" /&gt;
      &lt;input type="hidden" id="organisationid" value="@Model.Invoice.OrganisationId" /&gt;
      &lt;fieldset&gt;
          &lt;legend&gt;Invoice&lt;/legend&gt;
              @Html.HiddenFor(model =&gt; model.Invoice.InvoiceId)
  @Html.HiddenFor(model =&gt; model.Invoice.InvoiceAttachmentId)
  @Html.HiddenFor(model =&gt; model.Invoice.CreatedByUserName)
  @Html.HiddenFor(model =&gt; model.Invoice.CreatedDateTime)
  @Html.HiddenFor(model =&gt; model.Invoice.ProgramManagerId, new { @id = "programmanagerid"})
  &lt;div class="columnRightCreate editor-label"&gt;
      @Html.LabelFor(model =&gt; model.Invoice.AreaId)
  &lt;/div&gt;
  &lt;div class="dataRightCreate editor-field"&gt;
      @Html.DropDownListFor(model =&gt; model.Invoice.AreaId, Model.AreaList, new { @id = "areaddl" }, Model.Invoice.ActiveInvoiceLines.Count() == 0)
      @Html.ValidationMessageFor(model =&gt; model.Invoice.AreaId, "!")
  &lt;/div&gt;
  &lt;div class="invoiceHeaderCreate"&gt;
      &lt;div class="columnLeftCreate editor-label"&gt;
          @Html.LabelFor(model =&gt; model.Invoice.OrganisationId)
      &lt;/div&gt;
      &lt;div class="dataLeftCreate editor-field"&gt;
          @Html.DropDownListFor(model =&gt; model.Invoice.OrganisationId, Model.OrganisationList, new { @id = "organisationddl" })
          @Html.ValidationMessageFor(model =&gt; model.Invoice.OrganisationId, "!")
      &lt;/div&gt;
      &lt;div class="columnLeftCreate editor-label"&gt;
          @Html.LabelFor(model =&gt; model.Invoice.InvoiceNumber)
      &lt;/div&gt;
      &lt;div class="dateLeftCreate editor-field"&gt;
          @Html.EditorFor(model =&gt; model.Invoice.InvoiceNumber)
          @Html.ValidationMessageFor(model =&gt; model.Invoice.InvoiceNumber, "!")
      &lt;/div&gt;
      &lt;div class="columnLeftCreate editor-label"&gt;
          @Html.LabelFor(model =&gt; model.Invoice.InvoiceDate)
      &lt;/div&gt;
      &lt;div class="dataLeftCreate editor-field" id="datepicker"&gt;
          @Html.EditorFor(model =&gt; model.Invoice.InvoiceDate)
          @Html.ValidationMessageFor(model =&gt; model.Invoice.InvoiceDate, "!")
      &lt;/div&gt;
      &lt;div class="columnRightCreate editor-label"&gt;
          @Html.LabelFor(model =&gt; model.Invoice.TotalExcludingGst)
      &lt;/div&gt;
      &lt;div class="dataRightCreate editor-field"&gt;
          @Html.EditorFor(model =&gt; model.Invoice.TotalExcludingGst)
          @Html.ValidationMessageFor(model =&gt; model.Invoice.TotalExcludingGst, "!")
      &lt;/div&gt;
      &lt;div class="columnRightCreate editor-label"&gt;
          @Html.LabelFor(model =&gt; model.Invoice.TotalIncludingGst)
      &lt;/div&gt;
      &lt;div class="dataRightCreate editor-field"&gt;
          @Html.EditorFor(model =&gt; model.Invoice.TotalIncludingGst)
          @Html.ValidationMessageFor(model =&gt; model.Invoice.TotalIncludingGst, "!")
      &lt;/div&gt;
      &lt;div class="columnRightCreate editor-label"&gt;
          @Html.LabelFor(model =&gt; model.Invoice.AllowMoreThanAllowedPercentageToBePaidOverride)
          @Html.CheckBoxFor(model =&gt; model.Invoice.AllowMoreThanAllowedPercentageToBePaidOverride)
      &lt;/div&gt;
      &lt;div class="columnRightCreate editor-label"&gt;
          @Html.LabelFor(model =&gt; model.Invoice.AllowNumberOfProgressPaymentsOverride)
          @Html.CheckBoxFor(model =&gt; model.Invoice.AllowNumberOfProgressPaymentsOverride)
      &lt;/div&gt;
      @if (Model.Invoice.ApprovedForPayment == false) {
          &lt;div class="columnRightCreate editor-label"&gt;
              @Html.LabelFor(model =&gt; model.Invoice.Rejected)
              @Html.CheckBoxFor(model =&gt; model.Invoice.Rejected)
          &lt;/div&gt;
      }
  &lt;/div&gt;
  
  &lt;input type="submit" value="Update" /&gt;
      &lt;/fieldset&gt;
      &lt;fieldset&gt;
          &lt;legend&gt;Invoice Lines&lt;/legend&gt;
          &lt;table id="list"&gt;
          &lt;/table&gt;
          &lt;div id="pager"&gt;
          &lt;/div&gt;
      &lt;/fieldset&gt;
  }
  </code></pre>
  
  <p>This deals with and invoice and its associated invoicelines. so the first part is basic MVC update on the invoice details. There are textboxes, selects etc and you press the update button to send the details back to be saved. This works fine if all you do it alter the invoice details.</p>
  
  <p>However bellow that the table with id list is a jqgrid containing invoice lines. The code is:</p>
  
  <pre><code>$("#list").jqGrid({
          url: '/InvoiceLine/GridData/' + invoiceId,
          datatype: 'json',
          mtype: 'POST',
          colNames: ['InvoiceLineId', 'InvoiceId', 'Project', 'Amount', 'CreatedByUserName', 'CreatedDateTime', ''],
          colModel: [
  
                { name: 'InvoiceLineId', index: 'InvoiceLineId', hidden: true, key: true, editable: true, editrules: { required: false} },
                { name: 'InvoiceId', index: 'InvoiceId', hidden: true, editable: true, editrules: { required: false }, editoptions: { defaultValue: invoiceId} },
                { name: 'Project', index: 'Project' },
                { name: 'Amount', index: 'Amount', width: 150, align: 'right', formatter: 'number', formatoptions: { thousandsSeparator: "," }, editable: true, editrules: { required: true, custom: true, custom_func: iscurrencycheck} },
                { name: 'CreatedByUserName', index: 'CreatedByUserName', hidden: true, editable: true, editrules: { required: false} },
                { name: 'CreatedDateTime', index: 'CreatedDateTime', hidden: true, editable: true, editrules: { required: false} },
                { name: 'act', index: 'act', width: 55, align: 'center', sortable: false, formatter: 'actions',
                    formatoptions: { keys: true,
                        delbutton: false,
                        //Reload grid so that the price group gets updated after a save
                        onSuccess: function (rowid) { reload(); }
                    }
                }
                ],
          pager: $('#pager'),
          rowNum: 10,
          rowList: [5, 10, 20, 50],
          viewrecords: true,
          imgpath: '',
          caption: 'Invoice Lines',
          editurl: '/InvoiceLine/Save/',
          grouping: true,
          groupingView: {
              groupColumnShow: false,
              groupField: ['Project']
          }
      });
      $("#list").navGrid('#pager', { edit: false, add: true, del: true, search: false }, {  }, { width: 500 }, { url: "/../InvoiceLine/Delete" });
  });
  </code></pre>
  
  <p>This does the updates well etc. The problem is it causes problems with the MVC update. If you open the create invoice line dialog and then after closing it click the update button to save the invoice details a jquery validate error is thrown.</p>
  
  <p>d is undefined
  [Break On This Error]   </p>
  
  <p>....data(a.form,"validator").settings.meta;return b?c(a).metadata()[b]:c(a).metadat...</p>
  
  <p>I had a look at the source and I'm pretty sure this is because one you open the dialog for create it contains a form tag and even after you close it this remains on the page though disabled.</p>
  
  <p>Anyone know how to deal with this? Maybe how to get rid of the markup created by the dialog before the update button is pressed?</p>