jquery .valid() not working when resending the same form

Question

I think this it's simple but I can't figure it out,

I have a form a simple one that asks for a name, date one and date two.

when you submit here's the 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();
              }
           });
        }
    })

the ajax return a table that is inserted into a div, until this point it's fine.

but now when I modify the form chaging some values and I click the submit button to resend the form, this is what I get from the console:

Uncaught TypeError: $(...).valid is not a function

does anyone know why? and how can I fix it?

thanks.

UPDATED

Here is the bundleconfig file:

        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"));

and here's the form:

<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>

UPDATED

here's how I changed the submit

     $('#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; 
        }
    });

but this way use the default submit jquery validation, it doesn't execute the ajax, and redirects me to the other page.

any ideas?

Answer 1

**SOLVED IT **

a better way was recommended by @Sparky and by doing so it still works

    $('#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();
            }
        })