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 中的表，到此为止没问题。

但是现在当我修改表单更改一些值并单击提交按钮重新发送表单时，这是我从控制台得到的：

未捕获的类型错误：$(...).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 验证，它不执行 ajax，并将我重定向到另一个页面。

有什么想法吗？

Answer 1

你需要在 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()

Answer 2

**解决了它**

@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();
            }
        })