在ASP.NET MVC 5应用程序中有效的表单时触发jQuery函数

Question

我正在创建一个ASP.NET MVC 5应用程序。 我需要编写一些jQuery或JavaScript，以在提交表单时检查应用程序的表单是否有效（使用jQuery Validate ）。 如果表单有效，则该表单需要同时提交并显示一个警报框（目前）。 到目前为止，我已经使用过这篇文章来雕刻我的代码，但是它对我不起作用。 该代码正常运行：

$('form').submit(function () {
  alert('test');
});

但这对我不起作用：

$('form').submit(function () {
  if ($(this).valid()) {
    alert('the form is valid');
  }
});

我收到以下错误：

未捕获的TypeError：$（...）。valid不是函数

我不明白为什么这段代码对其他人有用，但对我却不起作用。 我要去哪里错了？

如何在表单有效时获取提交按钮以同时显示警报框和表单？

Answer 1

您正在使用哪个版本的jquery？ 我在Chrome浏览器的“网络”标签中选中该错误时，我的应用程序正在使用jquery 1.10.2。 jQuery验证程序仅适用于1.7.2、1.8.3、1.9.1、1.11.1、3.1.1。 这是根据插件页面-https://jqueryvalidation.org/

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js"></script>

 <script>
    $(document).ready(function () {

    $('#sampleForm').submit(function () {
        if ($(this).valid()) {
            alert('valid');
        }
        else {
            alert('not valid');
        }
    });
});
</script>
<div class="jumbotron">
  <h1>ASP.NET</h1>
  <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
  <p><a href="http://asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
</div>

<div class="row">
  <form id="sampleForm">
    <input type="text" />
    <input type="submit" value="Submit" />
  </form>
</div>

如果您使用的是VS MVC项目，请检查bundleConfig.cs，它会下载其他版本的jQuery。 确保它下载了所需的jQuery版本，或在下载jQuery进行测试的配置中注释该行。