jQuery and form validation in a C# MVC application

Question

I have an Index.cshtml in a C# application. This is the code of the form:

 @using (Html.BeginForm("CheckPlanID", "ForgotUserID", FormMethod.Post)) { <section class="vh-100" style="background-color: #508bfc;"> <div class="container py-5 h-100"> <div class="row d-flex justify-content-center align-items-center h-100"> <div class="col-12 col-md-8 col-lg-6 col-xl-5"> <div class="card shadow-2-strong" style="border-radius: 1rem;"> <div class="card-body p-5 text-center"> <h3 class="mb-5">Forgot User ID</h3> <div class="form-outline mb-4"> <label id="errorLabel" name="errorLabel" class="form-label @Model.GeneralErrorColor">@Model.GeneralError</label> </div> <div class="form-outline mb-4"> <input type="text" id="PlanID" asp-for="PlanID" name="PlanID" class="form-control form-control-lg" value="@Model.PlanID" /> <label class="form-label @Model.ErrorPlanIDColor" for="PlanID">@Model.ErrorPlanID</label> </div> <button class="btn btn-primary btn-lg btn-block" type="submit" id="nextButton" onclick="DisplayProgressMessage(this, 'Login');">Next</button> </div> </div> </div> </div> </div> </section> <div class="submit-progress hidden" style="background-color: #3b5998; text-align: center;"> <i class="fa fa-2x fa-refresh fa-spin" style="color: white"></i> <label style="color: white">Please wait...&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label> </div> } 

When the user clicks on the Next button, I execute the following jQuery:

 <script> function DisplayProgressMessage(ctl, msg) { var planID = $("#PlanID").val(); console.log("plan ID = " + planID); console.log("length = " + planID.length); if (planID.length == 4) { $(ctl).prop("disabled", true).text(msg); $("#nextButton").prop("disabled", true); // Wrap in setTimeout so the UI // can update the spinners setTimeout(function () { $(".submit-progress").removeClass("hidden"); }, 1); $("form").submit() } $("#errorLabel").text = "The Plan ID must be 4 characters in length"; } </script> 

When I run the application and type in 4 characters into the input box and click on the Next button, the jQuery executes, the hidden gets displayed, and the form gets submitted to my controller. This is correct.

When I run the application and type in 2 characters into the input box and click on the Next button, the jQuery executes, the hidden <div< does not get displayed, but the form still gets submitted to my controller.

How can I get jQuery to not submit the form when the length of the data typed into the input box is not 4?

Thank you

Answer 1

Since your button has a type of "submit" it will always submit the parent form, unless you prevented the events default behavior.

The easiest solution is to change your button to type = "button".