表单的 "button"类型而不是 "submit"类型的 JQuery 验证

Question

$('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 验证使用按钮而不是提交类型按钮？我见过这样的例子，当使用提交类型不满足规则时，JQuery 会自动显示错误消息，但它似乎不适用于按钮类型。如果有任何建议，我将不胜感激!

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