Question

我正在使用JQuery验证插件来验证我的应用程序中的表单。当按钮属于“提交”类型时，它运行良好。但是，我有一个表单，我需要使用JQuery.Ajax提交数据，因此我使用简单的<input type='button'>。但是验证不会起作用。这是工作代码 -

<head>
<script>
 $(document).ready(function(){
   $("#some_form").validate({});  
 }); 
</script>
</head>
<body>
<form name='some_form' id='some_form'>
<!--  Form Fields -->
<input type='submit' value='Submit'>
</form>
</body>

上面的代码可行，但是当我将其放在代码<input type='button' value='Submit'>中时，它不起作用。

有人知道如何让这个工作吗？

Answer 1

AFAIK，jQuery验证插件仅在触发提交时才有效;因此，当您在输入元素上有“按钮”类型时，表单实际上并未提交，因此验证永远不会运行。您是否有理由不想使用“提交”类型？

编辑以解决注释：要使用ajax，但仍然有“提交”按钮类型，您可以使用插件参数的“submitHandler”选项...像这样：

$("#some_form").validate({
        submitHandler: function(form) {
         ... ajax stuff here ...
    }
});

这将覆盖表单的实际发布，但仍会触发submit事件，以便运行验证。

Answer 2

奥莱特！我想我找到了答案。所以我在这里张贴以防万一有人需要它。这是代码

<head>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
  $('#button_id').click( function() {
    if ($("#some_form").validate().form() == true)
        {
            // Call Ajax Here
        }
  });  
});  
</script>
</head>
<body>
<form name='some_form' id='some_form'>
<!--  Form Fields -->
<input type='button' id='button_id' value='Submit'>
</form>
</body>

JQuery Validation插件不适用于简单按钮

2 个答案: