ASP.NET MVC 应用程序：添加了 jQuery 事件来提交按钮单击，现在 jQuery Validate 插件不再工作。

Posted 2023-05-09

【中文标题】ASP.NET MVC 应用程序：添加了 jQuery 事件来提交按钮单击，现在 jQuery Validate 插件不再工作。

【英文标题】：ASP.NET MVC Application: Added jQuery event to submit button click and now jQuery Validate plugin no longer working.

【发布时间】：2018-03-23 11:37:58

【问题描述】：

我正在开发一个 ASP.NET MVC 5 Web 应用程序。我想在我的程序中放入以下 ​​jQuery 代码，以确保图像在表单提交之前显示在页面上：

$('#submitButton').click(function (e) 
    //If Corporation is selected as business type
    if ($('#businessStructure').val() == "Corporation") 
        //Checks CEO signature present
        if ($("#signImage").length == 0 || $("#signImage").attr("src") == "") 
            //block the user from submitting and check for signature
            e.preventDefault();
            alert("Please sign and save your signature in the CEO signature pad");
            $("#ceoError").show();
        
        else 
            //all good, an image exists
            $('form').submit();
        
    
);

这段代码（我猜是因为 e.preventDefault()）现在完全忽略了 MVC 应用程序附带的 jQuery Validate 插件。但是，如果任何文本框缺少信息（jQuery Validate）和签名丢失（上面的代码），我需要阻止表单提交。

我从this post 明白为什么会发生这种情况。我该如何修复此代码，以便能够在单击提交按钮时使用 jQuery Validate 和新代码功能？

【参考方案1】：

只要你包含了jquery验证所需的相关脚本文件，当你提交表单时，就会执行验证，如果有验证消息会显示验证消息，并且不会提交表单 /strong> 到服务器。因此，请确保您的页面中包含所需的脚本

<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

如果页面中有脚本错误，则可能是您当前的脚本无法按预期工作的原因。我建议您检查您的浏览器控制台是否有页面中的任何脚本错误。

如上所述，您可以同时使用 jQuery 验证和自定义 if 条件。如果您想仅在表单通过验证时执行自定义 if 条件，您可以使用表单上的valid() 来确定表单是否有任何验证错误。

现在

$('#submitButton').click(function (e) 
    e.preventDefault();

    var isvalid = $(this).closest("form").valid();
    if(isValid)
    
       console.log('form validation passed');
       //do something custom
      
);