使用“按钮”类型而不是表单的“提交”类型进行 JQuery 验证答案

【问题标题】：JQuery validation with "button" type rather than "submit" type for a form使用“按钮”类型而不是表单的“提交”类型进行 JQuery 验证
【发布时间】：2012-08-11 12:17:29
【问题描述】：

$('selector').validation() 似乎是为“输入”类型按钮而不是“按钮”类型构建的。我如何让它与表单中的按钮类型一起使用？

@using(Html.BeginForm(new {id="TheForm"}))
{
     // code here
     <input id="TheButton" type="button">
}

JQuery:

$(document).ready(function() {
      $("#TheForm").validate({
            rules: {
                 "AuditDoc.Title": {
                       required: true
                  }
            }
      });
      $("#TheButton").click(function() {

      });
});

使用这个基本思想，我将如何让 jquery validate 使用按钮而不是提交类型按钮？我见过一些例子，当使用提交类型不满足规则时，JQuery 会自动显示错误消息，但它似乎不适用于按钮类型。我会很感激任何建议！

【问题讨论】：

用这个一键点击$("#TheForm").validate();

标签： jquery html asp.net-mvc-3 validation button

【解决方案1】：

$(document).ready(function () {
        $("#TheForm").validate({
            rules: {
                "AuditDoc.Title": {
                    required: true
                }
            }
        });

        $("#TheButton").click(function () {
            if (!$("#TheForm").validate()) { // Not Valid
                return false;
            } else {
                $("#TheForm").submit()
            }
        });

        $('#btnReset').live('click', function (e) {
            //var $validateObj = $('#formId');
            //Or
            var $validateObj = $(this).parents('form');

            $validateObj.find("[data-valmsg-summary=true]").removeClass("validation-summary-errors").addClass("validation-summary-valid").find("ul").empty();
            $validateObj.find("[data-valmsg-replace]").removeClass("field-validation-error").addClass("field-validation-valid").empty();
        });
    });

【讨论】：

只需提交表单 - 其余部分由验证完成。
问题是 validate 不会像使用 "submit" 类型那样自动使用 "button" 类型。您无法使用普通的旧按钮获得所有“验证完成其余部分”的业务。它似乎是为“提交”类型的按钮而构建的。
在我的版本中，我需要先调用 $("#TheForm").validate();然后使用有效的方法： if(!$("#TheForm").valid()) { }

【解决方案2】：

$(document).ready(function(){

     $("#myform").validate();
     $("#byuttion").click(function() {

       if($("#myform").valid())
       {
          $("#myform").submit();
       }
       else 
      {
          return false;
      }

      });

});

【讨论】：

谢谢伙计。我们需要先验证表格，然后再检查。问题解决了。

【解决方案3】：

一种骇人听闻的方式可能是：

$("#TheButton").click(function() {
     $("#TheForm").submit()
});

【讨论】：

这甚至不是骇人听闻的——关键是您要提交表单... jQuery validate 完成了剩下的工作。我会称其他大多数答案都是 hacky - 做验证工作无论如何都会完成:)
@TheDude - 看看他实际上在做什么 - 他正在点击按钮提交表单。它非常简单地模拟了提交按钮的作用。
@Ryley - 归结为 $.validation 是为 SUBMIT 类型的按钮构建的，而不是 BUTTON 类型的。当我尝试使用 BUTTON 类型时，.validation 不会启动。我尝试将它用于 SUBMIT 类型的按钮，它按预期工作。不幸的是，我们的应用程序需要能够使用 BUTTON 类型。
Ryley 是正确的，您所要做的就是让表单在点击时提交，然后它就像 type=submit 一样工作。如果表单无效，则取消表单提交。

【解决方案4】：

除了不支持提交方法外，它的工作原理与普通输入几乎相同。 preventDefault 只是阻止页面执行默认请求。

$("#TheButton").click(function(event) {
    event.preventDefault(); //or return false
    getData();
});

【讨论】：

我会试一试...虽然投了赞成票，但相信它会起作用:)