Conditional validation using ASP.Net Razor Pages

Question

I'm using ASP.Net Core 2.2 razor pages and Bootstrap 4, where a user is providing user information for each family member. The same form is used for adding members and editting but calls a different handler. If they don't provide an email, I want to display a modal confirming it. With my current code, if they provide an email, it submits properly. With no email, the modal displays but pressing 'Yes' does nothing and nothing is in the debug console.

 function submitForm() {
        if ($("#email").val() === "") {
            $('#modalNoEmail').modal();
            return false;
        } else {
            document.getElementById("frm1").submit();
        }
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div class="col-md-8 order-md-1">    
      
        <form method="post" onsubmit="return submitForm()" id="frm1">

            <div class="modal" tabindex="-1" role="dialog" id="modalNoEmail">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title"> No Email Specified</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <p>
                                You have not entered an email address. Confirm proceeding without entering an email address?
                            </p>
                        </div>
                        <div class="modal-footer">
                            @if (Model.Subscriber != null && Model.CountOfSubscribers > 0)
                            {
                                <button class="btn btn-primary btn-secondary btn-block button" type="submit" asp-page-handler="Edit">Yes</button>
                            }
                            else
                            {
                                <button class="btn btn-primary btn-secondary btn-block button" type="submit" asp-page-handler="Add">Yes</button>
                            }
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
                        </div>
                    </div>
                </div>
            </div>
            

            <div class="row">
                <div class="col-md-6 mb-3">
                    <label>First name</label>
                    <input asp-for="Subscriber.FirstName" class="form-control">
                    <span asp-validation-for="Subscriber.FirstName" class="text-danger"></span>
                </div>
                <div class="col-md-6 mb-3">
                    <label>Last name</label>
                    <input asp-for="Subscriber.LastName" class="form-control">
                    <span asp-validation-for="Subscriber.LastName" class="text-danger"></span>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label>Email</label>
                    <input asp-for="Subscriber.Email" class="form-control" id="email">
                    <span asp-validation-for="Subscriber.Email" class="text-danger"></span>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    @if (Model.Subscriber != null && Model.CountOfSubscribers > 0)
                    {
                        <button class="btn btn-primary btn-lg btn-block button" type="submit" asp-page-handler="Edit">Save</button>

                    }
                    else
                    {
                        <button class="btn btn-primary btn-lg btn-block button" type="submit" asp-page-handler="Add">Add Member</button>
                    }
                </div>               
            </div>

        </form>
        </div>
    </div>
</div>

You'd need to use ajax and partial views if you want the Model to update without page navigation. — Iskandar Reza, Jan 29 '19 at 19:06
https://stackoverflow.com/questions/26023489/how-do-i-use-a-controller-action-to-refresh-the-model-without-navigation <-- personally I feel this is a complex way of doing something jquery can solve in several lines. — Iskandar Reza, Jan 29 '19 at 19:08

score 1 · Accepted Answer · answered Jan 29 '19 at 19:08

1

Maybe I’m reading this wrong but it looks like you’ve got an endless loop. You’re submitting back to the handler, where your email is still an empty string so it’s just going to call the modal window again.

answered Jan 29 '19 at 19:08

Mike

26
2

That was it. Moved the javascript from the form onclick to the button onclick in the form and it's working. Thanks! – Bill Martin Jan 29 '19 at 20:01

Conditional validation using ASP.Net Razor Pages

1 Answers1