MVC Partial Views and bootstrap Modal

Question

I am callng a partial view by click on bootstarp nav bar(login anchor).that partial view is displaying perfectly but on that partial view validations are not working(in case the fields are blank).how to handle this.

that partial view is a login page.displayed under modal using jquery

Deepak Tewatia · Answer

It sounds like you're encountering an issue with the validation on a partial view displayed within a modal using Bootstrap and jQuery. When incorporating Bootstrap modal and MVC Partial Views it's crucial to ensure that the validation mechanisms are fully integrated. To address the validation problem you should consider the following steps: 1. Ensure that your form within the partial view includes the necessary validation attributes such as required for mandatory fields. 2. Verify that you have imported the relevant Bootstrap and jQuery libraries to support client-side validation within the modal. Here's an example of how your form fields might incorporate validation attributes within the partial view: @using (Html.BeginForm(Action Controller FormMethod.Post new { id = loginForm })) { @Html.ValidationSummary(true) @Html.LabelFor(model => model.Username) @Html.TextBoxFor(model => model.Username new { @class = form-control required = required }) @Html.ValidationMessageFor(model => model.Username  new { @class = text-danger }) @Html.LabelFor(model => model.Password) @Html.PasswordFor(model => model.Password new { @class = form-control required = required }) @Html.ValidationMessageFor(model => model.Password  new { @class = text-danger }) Login } Additionally you can utilize jQuery to ensure that the form validation is triggered when the modal is displayed. You may use the following JavaScript code for this purpose: $('#myModal').on('shown.bs.modal' function () { $('#loginForm').removeData('validator'); $('#loginForm').removeData('unobtrusiveValidation'); $.validator.unobtrusive.parse('#loginForm'); }); By executing this script when the modal is displayed it will reapply the validation rules to the form within the partial view. Implementing these adjustments should address the validation issue within the modal partial view. If you encounter any further challenges or have specific code snippets to discuss feel free to provide additional details for more targeted assistance.