title: Form Validation Bootbox
body: <p>I'm displaying a <code>PartialView</code> in a <code>Bootbox</code> from another <code>PartialView</code>. Then the data of <code>PartialView</code> will be saved in a database. Now, before saving it to the database, I need to assure that all required fields have a correct values (E.g. Not empty).</p>
  
  <p>Please find below codes.</p>
  
  <p><strong>Partial View to display in Bootbox (dialog)</strong></p>
  
  <pre><code>@model WebSensoryMvc.Models.SampleData
  
   @using (Html.BeginForm("Create", "SessionData", FormMethod.Post, new { id = "FormCreateSample", name = "FormCreateSample" }))
   {
       @Html.AntiForgeryToken()
  
  &lt;div class="container"&gt;
      &lt;div class="form-horizontal"&gt;
          @Html.ValidationSummary(true, "", new { @class = "text-danger" })
  
          &lt;div class="row"&gt;
              &lt;div class="form-group"&gt;
                  @Html.LabelFor(model =&gt; model.GroupNo, htmlAttributes: new { @class = "control-label col-md-2" })
                  &lt;div class="col-md-10"&gt;
                      @Html.EditorFor(model =&gt; model.GroupNo, new { htmlAttributes = new { @class = "form-control" } })
                      @Html.ValidationMessageFor(model =&gt; model.GroupNo, "", new { @class = "text-danger" })
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="row"&gt;
              &lt;div class="form-group"&gt;
                  @Html.LabelFor(model =&gt; model.MaterialID, "Material", htmlAttributes: new { @class = "control-label col-md-2" })
                  &lt;div class="col-md-10"&gt;
                      @Html.DropDownList("MaterialID", null, htmlAttributes: new { @class = "form-control" })
                      @Html.ValidationMessageFor(model =&gt; model.MaterialID, "", new { @class = "text-danger" })
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="row"&gt;
              &lt;div class="form-group"&gt;
                  @Html.LabelFor(model =&gt; model.SampleCode, htmlAttributes: new { @class = "control-label col-md-2" })
                  &lt;div class="col-md-10"&gt;
                      @Html.EditorFor(model =&gt; model.SampleCode, new { htmlAttributes = new { @class = "form-control" } })
                      @Html.ValidationMessageFor(model =&gt; model.SampleCode, "", new { @class = "text-danger" })
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="row"&gt;
              &lt;div class="form-group"&gt;
                  @Html.LabelFor(model =&gt; model.BatchCode, htmlAttributes: new { @class = "control-label col-md-2" })
                  &lt;div class="col-md-10"&gt;
                      @Html.EditorFor(model =&gt; model.BatchCode, new { htmlAttributes = new { @class = "form-control" } })
                      @Html.ValidationMessageFor(model =&gt; model.BatchCode, "", new { @class = "text-danger" })
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="row"&gt;
              &lt;div class="form-group"&gt;
                  @Html.LabelFor(model =&gt; model.SizeID, "Size", htmlAttributes: new { @class = "control-label col-md-2" })
                  &lt;div class="col-md-10"&gt;
                      @Html.DropDownList("SizeID", null, htmlAttributes: new { @class = "form-control" })
                      @Html.ValidationMessageFor(model =&gt; model.SizeID, "", new { @class = "text-danger" })
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="row"&gt;
              &lt;div class="form-group"&gt;
                  @Html.LabelFor(model =&gt; model.AgeID, "Age", htmlAttributes: new { @class = "control-label col-md-2" })
                  &lt;div class="col-md-10"&gt;
                      @Html.DropDownList("AgeID", null, htmlAttributes: new { @class = "form-control" })
                      @Html.ValidationMessageFor(model =&gt; model.AgeID, "", new { @class = "text-danger" })
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;div class="row"&gt;
              &lt;div class="form-group"&gt;
                  @Html.LabelFor(model =&gt; model.TemperatureID, "Temperature", htmlAttributes: new { @class = "control-label col-md-2" })
                  &lt;div class="col-md-10"&gt;
                      @Html.DropDownList("TemperatureID", null, htmlAttributes: new { @class = "form-control" })
                      @Html.ValidationMessageFor(model =&gt; model.TemperatureID, "", new { @class = "text-danger" })
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="row"&gt;
              &lt;div class="form-group"&gt;
                  @Html.LabelFor(model =&gt; model.PackagingTypeID, "Packaging Type", htmlAttributes: new { @class = "control-label col-md-2" })
                  &lt;div class="col-md-10"&gt;
                      @Html.DropDownList("PackagingTypeID", null, htmlAttributes: new { @class = "form-control" })
                      @Html.ValidationMessageFor(model =&gt; model.PackagingTypeID, "", new { @class = "text-danger" })
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="row"&gt;
              &lt;div class="form-group"&gt;
                  @Html.LabelFor(model =&gt; model.Spike, htmlAttributes: new { @class = "control-label col-md-2" })
                  &lt;div class="col-md-10"&gt;
                      &lt;div class="checkbox"&gt;
                          @Html.EditorFor(model =&gt; model.Spike)
                          @Html.ValidationMessageFor(model =&gt; model.Spike, "", new { @class = "text-danger" })
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="row"&gt;
              &lt;div class="form-group"&gt;
                  @Html.LabelFor(model =&gt; model.SampleType, htmlAttributes: new { @class = "control-label col-md-2" })
                  &lt;div class="col-md-10"&gt;
                      @Html.EditorFor(model =&gt; model.SampleType, new { htmlAttributes = new { @class = "form-control" } })
                      @Html.ValidationMessageFor(model =&gt; model.SampleType, "", new { @class = "text-danger" })
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="row"&gt;
              &lt;div class="form-group"&gt;
                  @Html.LabelFor(model =&gt; model.Remarks, htmlAttributes: new { @class = "control-label col-md-2" })
                  &lt;div class="col-md-10"&gt;
                      @Html.EditorFor(model =&gt; model.Remarks, new { htmlAttributes = new { @class = "form-control" } })
                      @Html.ValidationMessageFor(model =&gt; model.Remarks, "", new { @class = "text-danger" })
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          @*&lt;div class="form-group"&gt;
              &lt;div class="col-md-offset-2 col-md-10"&gt;
                  &lt;input type="submit" value="Create" class="btn btn-default" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;*@
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>}</p>
  
  <p><strong>Script to show the Bootbox with PartialView</strong></p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function () {
      $("#modalCreateSample").on('click', function () {
          $.ajax({
              url: "/SessionData/Create",
              type: 'GET',
              success: function (data) {
  
                  bootbox.dialog({
                      title: "Create Session",
                      message: data,
                      buttons: {
                          success: {
                              label: "Save",
                              className: "btn-success",
                              callback: function () {
  
                                  $.ajax({
                                      url: "/SessionData/Create",
                                      data: $("#FormCreateSample").serialize(),
                                      type: "POST",
                                      success: function (data) {
                                          alert('success');
  
                                          return true;
                                      },
                                      error: function (error) {
                                          alert('error');
  
                                          return false;
                                      }
                                  });
  
                              }
                          }
                      }
                  });
  
              },
              error: function (error) {
                  alert("Error: Please try again.");
              }
          });
      });
  });
   &lt;/script&gt;
  </code></pre>
  
  <p>Below is the sample snip of my current page so far. Once the user click the <strong>Save</strong> button it should fire a validation in the display popup. </p>
  
  <p>My problem now is on how to implement a <strong>validation</strong> in a <code>PartialView</code> and <code>Bootbox</code>? Any suggestion? TIA</p>
  
  <p><a href="https://i.stack.imgur.com/pdOLw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pdOLw.png" alt="enter image description here"></a></p>
  
  <p>**************************** Update #1 ****************************
  I ended up using the <code>Bootstrap Modal</code> rather than using <code>Bootbox</code>. I can now validate my form using the code gave by @Stephen Muecke.</p>
  
  <p>I'm just having a follow up regarding this. When calling my <code>POST</code> method the <code>serialize()</code> method return empty? Using my old piece of code return the correct <code>serialize()</code> data.</p>