When there is no validation errors the form get submitted hence a page reload happens that's why the modal popup gets closed.
Solution :- You need to submit the login form using AJAX, so that only that part of the page will get submitted.
سؤال
I have an application in Umbraco MVC 7, I have a button that call for Modal popup to open the login form. here is the modal code placed on partial view.
@inherits UmbracoTemplatePage
@using System.Web.Mvc.Html
@using ClientDependency.Core.Mvc
@using Umbraco.Web
@using Umbraco.Web.Models
@using Umbraco.Web.Controllers
@{
var loginModel = new LoginModel();
Html.EnableClientValidation();
Html.EnableUnobtrusiveJavaScript();
Html.RequiresJs("/umbraco_client/ui/jquery.js");
Html.RequiresJs("/umbraco_client/Application/JQuery/jquery.validate.min.js");
Html.RequiresJs("/umbraco_client/Application/JQuery/jquery.validate.unobtrusive.min.js");
}
@Html.RenderJsHere()
<div class="modal fade bs-example-modal-sm" id="login" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Login</h4>
</div>
@using (Html.BeginUmbracoForm<UmbLoginController>("HandleLogin", null, new { @class = "form-horizontal", role = "form" }))
{
<div class="modal-body">
<div class="form-group">
<div class="col-sm-12 formError">
@Html.ValidationSummary()
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
@Html.TextBoxFor(m => loginModel.Username, new { @class = "form-control", placeholder = "Username" })
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
@Html.PasswordFor(m => loginModel.Password, new { @class = "form-control", placeholder = "Password" })
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Login</button>
</div>
}
</div>
</div>
</div>
So when I don't type anything and clicks submit it keeps the modal open and display the validation error, all good, however if I type a wrong credentials its close the modal popup, instead I would like to keep open and display the returned error. I know it is not submitting because if I try to refresh the browser, it asks me to resend the form.
Any suggestion on what do I need to do to fix it?
Thanks a lot
المحلول
When there is no validation errors the form get submitted hence a page reload happens that's why the modal popup gets closed.
Solution :- You need to submit the login form using AJAX, so that only that part of the page will get submitted.