title: Spring MVC form validation through Bootstrap Modal and JQuery ajax
body: <p>I am a newbie in Spring MVC/Jquery and Bootstrap. Basically, I want to submit a form through a Bootstrap modal dialog -</p>
  
  <pre><code>&lt;div class="modal-body"&gt;
      &lt;sf:form class="form-horizontal" name="fpForm" id="fpForm" modelAttribute="fpDetails" action=“/forgotPassword.html“ htmlEscape="true" &gt;
       &lt;div class="row"&gt;
         &lt;div class="col-md-3"&gt;
              &lt;label&gt;Email Address : &lt;span class="redStar"&gt;*&lt;/span&gt;&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="col-md-9"&gt;
              &lt;sf:input type="email" class="form-control user inputIconPos" id="userName" placeholder="Email Address" path="userName"/&gt;
              &lt;sf:errors path="userName" cssStyle="color: #ff0000;"/&gt;
          &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
          &lt;div class="col-sm-12 text-center"&gt;
              &lt;sf:button class="btn btn-primary" onclick="javascript:forgotPassword();"&gt;Send Email&lt;/sf:button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/sf:form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The client-side validation is taken care by Jquery validation which does an ajax post if there are no validation issues. :-</p>
  
  <pre><code>function forgotPassword() {
      $("#fpForm").validate({
      errorClass: "my-error-class",
          rules: {
              userName: {
                  required: true,
                  email: true
              }
          },
          submitHandler: function (form) {
              $(form).ajax({
                type: "POST",
                url: tgtUrl,
                dataType: "json",
                data: formdata,
                success: function() { 
                  **//NOT INVOKED**
                    alert(“success”);
                  },  
                error: function(e) {
                  **//NOT INVOKED**
                    alert("Error"+e);
                  }
              });
          }
      });
  }
  </code></pre>
  
  <p>The form is then handled by a Spring MVC controller which runs some server side validation checks. The validation error/success message is added to the model. It is returning a jsonView (org.springframework.web.servlet.view.json.JsonView)</p>
  
  <pre><code>@RequestMapping(value = "forgotpassword.html", method = RequestMethod.POST)
  public String checkEmail(HttpServletRequest request,@ModelAttribute("fpDetails") @Valid LoginDetails fpDetails,
          HttpServletResponse response,RedirectAttributes model )
  {
        boolean status = isValidUser(fpDetails.getUser());
  
    if(status){
  
          model.addFlashAttribute("status”,”Please verify through your email ”);
      }else{
  
          model.addFlashAttribute("status”,”Not a registered email”);
      }
  
      return "jsonView";
  
  }
  </code></pre>
  
  <p><strong><em>ISSUE</em></strong>:
  I would like to stay on the modal itself to show the validation results. </p>
  
  <p>What happens right now is the page gets redirected to “GET” version of the same URL(/forgotPassword.html) and shows the JSON object? 
  Also, the Jquery .ajax methods success or error callback does not get invoked(probably because it is redirected to ).</p>
  
  <p>Hope I could convey the issue/requirement properly!</p>