Abort form submission on AJAX beginform with JavaScript

Question

I am working with .NET MVC. My problem is that I need to abort an AJAX call if a JavaScript statement is true.

<div class="Filter_inner_title white_unifrom out-of-grid">
            @using (Ajax.BeginForm("Search", "Protocol", new AjaxOptions
        {
            HttpMethod = "GET",
            UpdateTargetId = "ajax-content"
        }, new { id = "form" }))
            {
                <div class="head-sys-content dotted-gray-bg white-unifrom-small">
                    <ul class="table-head-branch">
                        <li>
                            <ul class="Select_box_white_bg">
                                <li>
                                    <label class="label">@Html.DrawLabel("BoxNr")</label>
                                    @Html.TextBoxFor(model => Model.Search.BoxNumber, new { @class = "text", @style = "width: 70px" })
                                </li>
                                <li id = "FromDateContainer">
                                    <label class="label">@Html.DrawLabel("from")</label>
                                    @Html.TextBoxFor(model => Model.Search.FromDate, new { @class = "text datePicker" })
                                    <div class="validation-protocol-message">
                                        @Html.ValidationMessageFor(model => Model.Search.FromDate)
                                    </div>                                    
                                </li>
                                <li>
                                    <label class="label">@Html.DrawLabel("to")</label>
                                    @Html.TextBoxFor(model => Model.Search.ToDate, new { @class = "text datePicker" })                                                                        
                                    @Html.ValidationMessageFor(model => Model.Search.ToDate)
                                </li>
                                <li>
                                    <div class="medium-chosen left">
                                        <label class="label">@Html.DrawLabel("protocolType")</label>
                                        @Html.DropDownListFor(model => Model.Search.ProtocolType, new SelectList(Model.ProtocolTypeList, "ID", "Label.Text", Model.Search.ProtocolType), Html.DrawLabel("all"), new { @class = "chosen-select" })
                                    </div>
                                </li>
                            </ul>
                            @Html.HiddenFor(model => Model.Search.PageIndex, new { @class = "PageIndex", @id = "PageIndex" })
                            @Html.HiddenFor(model => Model.Search.ContractId)
                            @Html.HiddenFor(model => Model.Search.IsFromContract)
                            <div class="big-button search left">
                                <input type="submit" value="@Html.DrawLabel("search")" id="SubmitButton" class="arrow-search" />
                            </div>
                        </li>
                    </ul>
                </div>     
            }

this is the form.

$("#form").on("submit", function (e) {
    debugger;

    var FromDate = $("#Search_FromDate").val();
    var ToDate = $("#Search_ToDate").val();
    var FromDateConvert = Globalize.parseDate(FromDate, datePattern);
    var ToDateConvert = Globalize.parseDate(ToDate, datePattern);
    var fromYear = FromDateConvert.getFullYear();
    var toYear = ToDateConvert.getFullYear();
    if (fromYear < 1970) {          
        $("#FromDateContainer span.field-validation-valid").html("@String.Format(Html.DrawLabel("DateOutOfBounds"),Model.Search.FromDate)");
        $("#FromDateContainer span.field-validation-valid").attr("class", "field-validation-error");
        //$(".field-validation-error").css("position", "absolute");
    }
});

I need to abort the beginning form call if the if statement is true. Is there a way to stop every call made of that specific trigger?

Answer 1

I resolved this problem by using a simple from and making the ajax call after the front validation

var datePattern = '@(Thread.CurrentThread.CurrentUICulture.DateTimeFormat.ShortDatePattern)';

$("#form").on("submit", function (e) {
    debugger;
    e.preventDefault();
    var FromDate = $("#Search_FromDate").val();
    var ToDate = $("#Search_ToDate").val();
    var FromDateConvert = Globalize.parseDate(FromDate, datePattern);
    var ToDateConvert = Globalize.parseDate(ToDate, datePattern);
    var fromYear = FromDateConvert.getFullYear();
    var toYear = ToDateConvert.getFullYear();

    if (fromYear < 1970 && toYear < 1970) {

        $("#ToDateContainer span.field-validation-error").html("@String.Format(Html.DrawLabel("DateOutOfBounds"),Model.Search.FromDate)");

        $(".field-validation-error").html("");
        $("#ToDateContainer span.field-validation-valid").addClass("field-validation-error");
        $("#FromDateContainer span.field-validation-valid").html("@String.Format(Html.DrawLabel("DateOutOfBounds"),Model.Search.FromDate)");
        $("#FromDateContainer span.field-validation-valid").attr("class", "field-validation-error");
        $("#ToDateContainer span.field-validation-valid").html("@String.Format(Html.DrawLabel("DateOutOfBounds"),Model.Search.FromDate)");
        $("#ToDateContainer span.field-validation-valid").attr("class", "field-validation-error");
        $(".field-validation-error").show();

    }
    else if (fromYear < 1970) {
        $(".field-validation-error").html("");
        $("#FromDateContainer span.field-validation-valid").html("@String.Format(Html.DrawLabel("DateOutOfBounds"),Model.Search.FromDate)");
        $("#FromDateContainer span.field-validation-valid").attr("class", "field-validation-error");
        $(".field-validation-error").show();
    }
    else if (toYear < 1970) {
        $(".field-validation-error").html("");
        $("#ToDateContainer span.field-validation-valid").html("@String.Format(Html.DrawLabel("DateOutOfBounds"),Model.Search.FromDate)");
        $("#ToDateContainer span.field-validation-valid").attr("class", "field-validation-error");
        $(".field-validation-error").show();
    }


    else {
        $(".field-validation-error").html("");
        $.ajax({
            url: '@Url.Action("Search", "Protocol")',
            contentType: "application/json; charset=utf-8",
            data: $(this).serialize(),
            success: function (data) {
                $('#ajax-content').html(data);
            }
        });

    }