Display error message in the same dialog popup in mvc

Question

I have a MVC application where I implemented an advance search dialog popup. If the user do not type anything in any of the textbox and they click the search button, I want to keep the popup open and display the error message on the same popup. My problem is that it will close that dialog popup and display the textbox for advance search and error message on the main page instead. Can anyone tell me what I'm doing wrong?

Index View

<div class="modal fade" id="AdvSearch">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <a href="#" class="close" data-dismiss="modal">&times;</a>
                <p style="font-weight: bold" class="modal-title">Advance Search</p>
            </div>
            <div class="modal-body">
                <form id="AdvanceSearchForm">
                    @Html.Partial("AdvSrchForm")
                </form>
            </div>
            <div class="modal-footer">
                <table>
                    <tr>
                        <td><p align="left">% accepts wildcard</p></td>
                        <td width="320px"></td>
                        <td><input type="submit" value="Search" class="btn btn-default" id="ASearchbtn" /></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function () {
    $("#ASearchbtn").click(function () {

        var form = $('#AdvanceSearchForm');
        $.validator.unobtrusive.parse(form);
        form.validate();
        var ASData = $("#AdvanceSearchForm").serialize();

        if (form.valid())
        {
            $.ajax({
                type: "POST",
                url: "/SearchPayment/SubLookup",
                data: ASData,
                cache: false,
                success: function (response) {
                    $("#AdvSearch").modal("hide");
                    $('.modal-backdrop').remove();
                    $('#ASGrid').html('');
                    $('#ASGrid').html(response);
                    $('#ASGrid').show();
                    $("#DataList").hide();
                },
                error: function (error) {
                    console.log(error);
                }
            });
        }
})

Controller

public ActionResult Index()
    {

        return View();
    }

[HttpPost]
    public ActionResult AdvanceSearch(Payments filter)
    {

        Session.Clear();
        //get data from db base on filter
        if (!((filter.fName ?? filter.LName ?? filter.grp ?? filter.sec ?? filter.zip ?? filter.hPhone ?? filter.SSN) == null && filter.bday == null))
        {
            model = GetUserSession(filter);

            model = (PremiumPayments)Session["PaymentData"];
            return PartialView("SubscriberGrid", model);
        }
        else
        {
            ViewBag.ErrMsg = "Invalid Search - At least one field is required.";
            return PartialView("AdvSrchForm");
        }
    }

Advance Search Form (Partial View)

@model PaymentFinder.Models.PremiumPayments

<table class="advsrchfrm">
    <tr>
        <td>@Html.Label("First Name %")</td>
        <td>@Html.TextBoxFor(x => x.fName, new { @class = "form-control"}
</td>
        <td>@Html.Label("Last Name %")</td>
        <td>@Html.TextBoxFor(x => x.LName, new { @class = "form-control" })
</td>
    </tr>
    <tr>
        <td>@Html.Label("Birthdate")</td>
        <td>@Html.TextBoxFor(x => x.bday, "", new { placeholder = 
DateTime.Now.ToString("d") })</td>
        <td>@Html.Label("Phone #")</td>
        <td>@Html.TextBoxFor(x => x.hPhone, new { @class = "form-control" })
</td>
    </tr>
    <tr>
        <td>@Html.Label("Zip Code")</td>
        <td>@Html.TextBoxFor(x => x.zip, new { @class = "form-control" })
</td> 
    </tr>
</table>

<br />

@if (//condition to display this)
{
    <span class="text-danger" style="font-weight: 
bold">@Html.Raw(ViewBag.ErrMsg)</span>
}

Answer 1

I think the problem is because you a doing a post and the page refresh completely. Why not do the validation using jQuery and if everything is valid then do the post.