MVC show modal if form submit is valid

Question

Good day! I want to create a modal that pops-up when the user clicks the submit button only if the form is valid just like this. The form validation works perfectly after click but when the form is valid, nothing happens to the form and the modal doesn't pop-up.

I have tried the solutions in here such as

$('#myModal').modal("show");
$('#myModal').dialog('open');
$('#myModal').modal();
$('#myModal').show();
$('#myModal').modal('toggle');

but still not popping up.

VIEW

<div class="col-lg-offset-4 col-lg-12">
 @using (Html.BeginForm("CedulaModule", "ApplicationForm", FormMethod.Post, new { id = "contactForm", name = "contactForm" }))
{
        @Html.AntiForgeryToken()

    <div class="form-horizontal">

        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

        <div class="form-group">
            @Html.LabelFor(model => model.ApplicationCode, htmlAttributes: new { @class = "control-label" })
            @Html.EditorFor(model => model.ApplicationCode, new { htmlAttributes = new { @class = "form-control", @Value = @ViewBag.iAppFrmDet, @readonly = "readonly" } })
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Firstname, htmlAttributes: new { @class = "control-label" })
            @Html.EditorFor(model => model.Firstname, new { htmlAttributes = new { @class = "form-control", placeholder = @Html.DisplayNameFor(m => m.Firstname) } })
            @Html.ValidationMessageFor(model => model.Firstname, "", new { @class = "text-danger" })
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.MiddleInitial, htmlAttributes: new { @class = "control-label" })
            @Html.EditorFor(model => model.MiddleInitial, new { htmlAttributes = new { @class = "form-control", placeholder = @Html.DisplayNameFor(m => m.MiddleInitial) } })
            @Html.ValidationMessageFor(model => model.MiddleInitial, "", new { @class = "text-danger" })
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Surname, htmlAttributes: new { @class = "control-label" })
            @Html.EditorFor(model => model.Surname, new { htmlAttributes = new { @class = "form-control", placeholder = @Html.DisplayNameFor(m => m.Surname) } })
            @Html.ValidationMessageFor(model => model.Surname, "", new { @class = "text-danger" })
        </div>

        <div class="form-group">
            <input type="submit" value="Save" id="validate" class="btn btn-default"/>
        </div>
    </div>
}

MODAL

<div id="myModal" tabindex="-1" role="dialog" aria-hidden="true" class="modal fade">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            Confirm Submit
            <button type="button" data-dismiss="modal" aria-hidden="true" class="close">×</button>
        </div>

        <div class="modal-body">
                    @Html.Partial("CedulaPartial")
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <input type="submit" value="Submit" class="btn btn-success" />
        </div>
    </div>
</div>

JQUERY

<script type="text/javascript">
$('#contactForm').submit(function (e) {
    e.preventDefault();

    if ($(this).valid()) {
        $('#myModal').modal("show");
    }
});

Thanks in advance.

Have you put references of `bootstrap.min.css` and `bootstrap.min.js` on your view? — Trimantra Software Solution, Jul 10 '18 at 04:14
@TrimantraSoftwareSolution I am using the default bootstrap css of MVC — Mace Munch, Jul 10 '18 at 05:08
@TrimantraSoftwareSolution I get no error. Nothing happens after clicking the button but when no data was entered, validation works — Mace Munch, Jul 10 '18 at 06:46

score 2 · Answer 1 · answered Jul 10 '18 at 04:14

2

If your form is valid save this information in any TempData and check this var on form load if data flag is exist then show your modal.

Add TempData in control post action.

TempData[“modalValid”]=true;

On form load using JavaScript.

$(document)ready(function (){
 If(@TempData[“modalValid””]==true)
      //display your modal
      //set null in TempData
});

This code is not tested this is only for your reference.

answered Jul 10 '18 at 04:14

Abhishek Tomar

827
1
10
20

Tried this but still the modal doesn't pop-up – Mace Munch Jul 10 '18 at 06:31
Share console error. Check Modal reference is loading or not . – Abhishek Tomar Jul 10 '18 at 15:40
No error is showing when I run the system. As soon as the button was clicked, nothing happens but when there is a validation error, the code works – Mace Munch Jul 11 '18 at 00:21
I noticed that this part of code, 'if ($(this).valid()) { $('#myModal').modal("show"); }' doesn't work. When I include 'e.preventDefaul();' it won't trigger, same with removing the 'e.preventDefault();' – Mace Munch Jul 11 '18 at 06:21
Check Point : Run your program and copy show modal code in console and check modal is display or not? Check form valid function value in console this is true or not? – Abhishek Tomar Jul 11 '18 at 19:42

score 0 · Answer 2 · answered Jul 17 '18 at 01:53

0

UPDATE

After running into this post. I was able to make the code also work. Unfortunately, it was the class that was causing me error. As soon as I removed it, my code also worked. Thanks for the help.

answered Jul 17 '18 at 01:53

Mace Munch

65
3
10

score 0 · Answer 3 · answered Oct 11 '18 at 19:44

The e.preventDefault() call is preventing the submit every time. Even when the form is valid. Try using a flag "confirmed" to make sure the e.preventDefault() is only called before the modal has been shown.

var confirmed = false;
function SubmitConfirmfunction() {

    confirmed = false;
    $("#contactForm").submit();

}
$(document).ready(function () {
    $('#contactForm').submit(function (e) {
    
        if (confirmed == false) {
            if ($(this).valid()) {
                confirmed = true;
                e.preventDefault();
                $('#myModal').modal("show");
            }
        }
    });
});

MVC show modal if form submit is valid

3 Answers3