title: How can I validate a ViewModel in jQuery Dialog?
body: <p>My AddressEditViewModel has a bunch of attributes marked <code>[Required(ErrorMessage="My Error Message Here")]</code> and/or <code>[DisplayName("etc")]</code>. The DisplayName attributes work:</p>
  
  <pre><code>&lt;%: Html.LabelFor(model =&gt; model.Field) %&gt;
  </code></pre>
  
  <p>, and I think the Required attributes are working too, but I don't know how to provide feedback on the form (jQuery UI Dialog). This form is submitted via $.ajax(), and in the action method:</p>
  
  <pre><code>[HttpPost]
      public ActionResult Edit(AddressEditViewModel address)
      {
          var addressToEdit = dc.Addresses.FirstOrDefault(x =&gt; x.AddressID == address.AddressIDEdit);
  
          if (ModelState.IsValid)
          {
              //make sure there is at least one active address
              if (!address.ActiveEdit &amp;&amp; (addressToEdit != null &amp;&amp; addressToEdit.Active))
              {
                  if (dc.Addresses.Where(x =&gt; x.ProfileID == addressToEdit.ProfileID).Count(x =&gt; x.Active) == 1)
                  {
                      address.ActiveEdit = true;
                  }
              }
  
              try
              {
                  //TryUpdateModel SUCKS!~
                  //use valueinjecter
                  addressToEdit.InjectFrom&lt;VMToAddress&gt;(address);
  
                  dc.SubmitChanges();
              }
              catch (Exception)
              {
                  return View(address);
              }
          }
          else
          {
              return View(address); //activate the red borders around textboxes
          }
  
          return Content("Ok");
      }
  </code></pre>
  
  <p>And the little class for ValueInjecter:</p>
  
  <pre><code>public class VMToAddress : LoopValueInjection
  {
      protected override string TargetPropName(string sourcePropName)
      {
          if (sourcePropName.EndsWith("Edit"))
          {
              return sourcePropName.RemoveSuffix("Edit"); 
          }
          else if (sourcePropName.EndsWith("Create"))
          {
              return sourcePropName.RemoveSuffix("Create");
          }
          else
          {
              return sourcePropName;
          }
      }
  }
  </code></pre>
  
  <p>ModelState.IsValid returns true even though <code>address.RequiredField</code> is null. <code>SubmitChanges()</code> throws a SqlException because it can't insert the NULL value. Am I not understanding how to use ModelState, or is there some other way to provide feedback on an invalid field? I'd like to set a red border around my textboxes like the model validation I've seen in a lot of the MVC tutorials, or maybe display my ErrorMessage value from the ViewModel.</p>
  
  <p><strong>Another Edit</strong></p>
  
  <p>Removed jQuery.validate and created a customer model binder to accommodate the commonly named elements. The custom model binder now even adds the validation messages (so I removed the <code>Html.ValidationMessageFor(...)</code> calls since I don't want them--just the borders). </p>
  
  <p>However, at Omu's suggestion to use the jQuery.form plugin, my model seems to be lost after the first postback. <code>closeEditForm</code> just checks for a return of <code>Content("Ok")</code>, closes the Edit dialog and finally refreshes the List dialog. But, after an error, it correctly does not close the dialog, gives me red borders (hooray), but on subsequent posts there is <strong>no model</strong> (boo) passed to my binder--just null values.</p>
  
  <pre><code>$('#editform').submit(function () {
      $(this).ajaxSubmit({
          target: '#editform', //this will allow validation classes to be added, etc
          success: closeEditForm //this will close the edit form if the response text is "Ok"
      });
      return false;
  });
  </code></pre>
  
  <p>I submit the form like this:</p>
  
  <pre><code>$("#dialog-address-edit").dialog({
              ...lots of dialog settings
              buttons: {
                  'Save': function () {
                      $('#editform').submit();
  </code></pre>