对于表单，使用“按钮”类型而不是“提交”类型的JQuery验证

对于“输入”类型按钮而言，$（'selector'）.validate（）似乎比“按钮”类型更多。我如何使用表单中的按钮类型来处理它？对于表单，使用“按钮”类型而不是“提交”类型的JQuery验证

@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在使用提交类型不满足规则时自动显示错误消息的示例，但它似乎不适用于按钮类型。我会很感激任何建议！

来源

2012-08-11 TheDude

使用这种一个键点击$（ “＃TheForm”）验证（）; – Thulasiram 2012-08-11 13:05:32

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

来源

2012-08-11 13:04:11 Thulasiram

只需提交表格 - 验证剩下的事情。 – Ryley 2012-08-13 15:14:28

问题是，验证不会像键入“submit”那样自动使用类型“按钮”。你不能用普通的旧按钮来“证实其余”业务。它似乎是为“提交”类型按钮而构建的。 – TheDude 2012-08-14 14:13:50

@TheDude - 我明白了，我的观点是验证已经被挂钩到表单的提交中，所以让按钮做的最合理的事情就是......提交表单。 – Ryley 2012-08-23 16:56:14

一个hackish的方式可以是：

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

来源

2012-08-11 12:25:22 Rafay

这甚至不是hackish - 关键是你想提交表单... jQuery验证完成剩下的工作。我会打电话给大多数其他答案hacky - 做的工作验证会做反正:) – Ryley 2012-08-13 15:13:43

@TheDude - 看看他在做什么 - 他正在点击按钮提交表单。它模拟一个提交按钮的操作非常简单。 – Ryley 2012-08-23 16:56:49

@Ryley - 它涉及的是$ .validation是为SUBMIT类型的按钮而不是BUTTON类型构建的。当我尝试使用按钮类型时，.validation不起作用。我尝试将它用于SUBMIT类型的按钮，并按预期工作。不幸的是，我们的应用程序需要能够使用BUTTON类型。 – TheDude 2012-08-25 01:09:14

它的工作原理几乎相同，因为它会与正常输入，除了它不支持提交方法。 preventDefault只是停止页面进行默认请求。。

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

来源

2012-08-11 12:30:46

我会给这个尝试......虽然给予upvote，相信它会工作:) – 2014-07-16 12:12:14

$(document).ready(function(){ 

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

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

     }); 

});

来源

2012-08-11 13:09:18

感谢队友。我们需要先验证表格，然后再检查。问题解决了。 – 2017-01-12 11:31:01

对于表单，使用“按钮”类型而不是“提交”类型的JQuery验证

回答

相关问题