0

I am a newbie in Spring MVC/Jquery and Bootstrap. Basically, I want to submit a form through a Bootstrap modal dialog -

<div class="modal-body">
    <sf:form class="form-horizontal" name="fpForm" id="fpForm" modelAttribute="fpDetails" action=“/forgotPassword.html“ htmlEscape="true" >
     <div class="row">
       <div class="col-md-3">
            <label>Email Address : <span class="redStar">*</span></label>
        </div>
        <div class="col-md-9">
            <sf:input type="email" class="form-control user inputIconPos" id="userName" placeholder="Email Address" path="userName"/>
            <sf:errors path="userName" cssStyle="color: #ff0000;"/>
        </div>
        </div>
        <div class="row">
        <div class="col-sm-12 text-center">
            <sf:button class="btn btn-primary" onclick="javascript:forgotPassword();">Send Email</sf:button>
        </div>
    </div>
    </sf:form>
</div>

The client-side validation is taken care by Jquery validation which does an ajax post if there are no validation issues. :-

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);
                }
            });
        }
    });
}

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)

@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";

}

ISSUE: I would like to stay on the modal itself to show the validation results.

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 ).

Hope I could convey the issue/requirement properly!

Shehary
  • 9,926
  • 10
  • 42
  • 71
Happy_coding
  • 19
  • 1
  • 5
  • So after you perform the client side validation with Jquery, you want to validate on the server and stay on the same modal that has the form? I've never done anything like that, but I would guess and say that you would have to trigger the modal to pop up again and than use the success/failure result from the server to populate the error messages if there are any. – Hatem Jaber Sep 28 '15 at 11:38
  • it's the issue with the `submitHandler` because with Ajax, page shouldn't redirected, check answers here, http://stackoverflow.com/questions/18265637/jquery-validate-with-ajax-in-submithandler-submits-on-second-click – Shehary Sep 28 '15 at 11:50
  • @Shehary I followed the approach in the link by removing code to handle success/fail from the ajax and placing it through request.done. But I am still getting the same issue and request(.done/.fail/.always) callbacks are not getting invoked. – Happy_coding Sep 28 '15 at 15:32

0 Answers0