javascript - 当按钮位于表单之外时，jQuery 验证不起作用

Question

我遇到一个问题，当提交按钮放置在表单标签之外时(这是我的 Cordova 移动应用程序所必需的)，jQuery 验证无法正常工作。一旦调用 .validate，执行就会停止。

我的 HTML 是这样设置的:

<form id="form-cart" >
  // All form fields here
</form>

<ons-bottom-toolbar>
  <button class="button" onclick="addToBasket();" data-trn-key="add_to_basket">
  Add to Basket
  </button>
</ons-bottom-toolbar>

然后该函数被调用为:

function addToBasket()
{   
    $.validate({    
        form : '#form-cart',    
        borderColorOnError:"#FF0000",
        onError : function() {    
        },      
        onSuccess : function() {  
        // Run ajax on success
              } 
            };   
            sNavigator.pushPage("confirmation.html", options);             
           return false;
        }  
    });
}

如何才能使其正常工作，以便即使按钮位于表单标记之外也能验证并调用 ajax？

Answer 1

根据jQuery验证插件documentation有两种不同的方法:

validate() – 验证所选表单。

valid() – 检查所选表单或所选元素是否有效。

因此，您应该在函数外部使用 .validate 方法设置表单验证，并检查函数内部表单是否有效(请参阅下面的代码示例):

$('#form-cart').validate({    

});

function addToBasket() {   
    if ($('#form-cart).valid()) 
        //do you onSuccess stuff
    }
}