jquery .valid () не работает при повторной отправке той же формы

Question

Я думаю, что это просто, но я не могу понять,

У меня есть простая форма, которая запрашивает имя, дату одну и дату два.

когда выпредставьте вот jquery

    $('#searchRange').on('submit', function (e) {
        e.preventDefault()
        var x = $(this).serialize();
        if ($(this).valid()) {
            $.ajax({
              type: 'POST',
              url: '/Statistics/Home',
              data: x,
              cache: false,
              beforeSend: function () {
                  $('.dk-linear-loading-wrapper').fadeIn('slow');
              },
              success: function (e) {
                  $('#sellsTable').html(e);
              },
              complete: function () {
                  $('.dk-linear-loading-wrapper').fadeOut();
              }
           });
        }
    })

ajax возвращает таблицу, которая вставлена ​​в div, до этого момента все нормально.

но теперь, когда я изменяю форму, изменяющую некоторые значения, и нажимаюкнопка отправки для повторной отправки формы, вот что я получаю из консоли:

Uncaught TypeError: $ (...). valid не является функцией

кто-нибудь знает почему?и как я могу это исправить?

спасибо.

ОБНОВЛЕНО

Вот файл bundleconfig:

        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));

        bundles.Add(new ScriptBundle("~/bundles/custom-validators").Include(
                    "~/Scripts/custom-validators.js"));

        bundles.Add(new ScriptBundle("~/bundles/myScripts").Include(
                    "~/Scripts/Plugin.js",
                    "~/Scripts/Velocity.js",
                    "~/Scripts/Chart.js",
                    "~/Scripts/Admin.js"));

ивот форма:

<form id="searchRange">
<label class="col-sm-auto text-center">
            <i class="fas fa-user"></i>
            Nombre:
        </label>
        <div class="col-sm-2">
            <div class="form-group row">
                @Html.TextBoxFor(model => model.name, new { @class = "form-control form-control-sm text-center mr-3" })
            </div>
            <div class="row">
                @Html.ValidationMessageFor(model => model.name, "", new { @class = "alert alert-danger", type = "date" })
            </div>
        </div>
        <label class="col-sm-auto text-center">
            <i class="fas fa-calendar-alt"></i>
            Fecha desde:
        </label>
        <div class="col-sm-2">
            <div class="form-group row">
                @Html.TextBoxFor(model => model.dateFrom, new { @class = "form-control form-control-sm text-center mr-3" })
            </div>
            <div class="row">
                @Html.ValidationMessageFor(model => model.dateFrom, "", new { @class = "alert alert-danger", type = "date" })
            </div>
        </div>
        <label class="col-sm-auto text-center">
            <i class="fas fa-calendar-alt"></i>
            Fecha hasta:
        </label>
        <div class="col-sm-2">
            <div class="form-group row">
                @Html.TextBoxFor(model => model.dateUntil, new { @class = "form-control form-control-sm text-center mr-3" })
            </div>
            <div class="row">
                @Html.ValidationMessageFor(model => model.dateUntil, "", new { @class = "alert alert-danger", type = "date" })
            </div>
        </div>
        <div class="col-sm-auto">
            <div class="form-group">
                <input type="submit" class="btn btn-primary btn-sm" value="Buscar" />
            </div>
        </div>
</form>

ОБНОВЛЕНО

вот как я изменил отправку

     $('#searchPositionsByCode').validate({
        submitHandeler: function (form) {
            $.ajax({
                type: $(form).attr("method"),
                url: $(form).attr("action"),
                data: $(form).serialize(),
                cache: false,
                beforeSend: function () {
                    $('.dk-linear-loading-wrapper').fadeIn('slow');
                },
                success: function (e) {
                    $('#infoByCodeDisplayed').html(e);
                    $('#infoByCodeDisplayed').removeClass('d-none');
                },
                complete: function () {
                    $('.dk-linear-loading-wrapper').fadeOut();
                }
            })
        return false; 
        }
    });

, но при этом используется проверка JQuery отправки по умолчанию, она не выполняетсяАякс, и перенаправляет меня на другую страницу.

есть идеи?

Answer 1

** РЕШЕНО ЭТО **

@Sparky рекомендовал лучший способ, и при этом он все еще работает

    $('#searchRange').data('validator').settings.submitHandler = function (form) {
        $.ajax({
            type: 'POST',
            url: '/Statistics/Home',
            data: $('#searchRange').serialize(),
            cache: false,
            beforeSend: function () {
                $('.dk-linear-loading-wrapper').fadeIn('slow');
            },
            success: function (e) {
                $('#sellsTable').html(e);
            },
            complete: function () {
                $('.dk-linear-loading-wrapper').fadeOut();
            }
        })

Answer 2

Для работы ему необходимо указать действительный плагин jQuery ниже jQuery

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

Вы также можете оформить jQuery validate ()