Question

我有一个问题，当提交按钮放在表单标签之外时，jQuery验证不起作用（这是我的Cordova移动应用程序所必需的）。一旦调用.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验证插件official document，有两种不同的方法：

validate() - 验证所选表单。

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

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

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

});

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

Answer 2

试试这个：

<form id="form-cart" >
    // All form fields here
    // Don't give <input type="submit"> here
</form>

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

和

$(document).ready(function () {
    $("#submitBtn").click(function () {
        $("#form-cart").submit();
    });
});

当按钮在表单之外时，jQuery validate不起作用

2 个答案: