Question

我在一个页面上有两个表单（在http://www.bumblebeezflorist.com/上将产品添加到您的购物篮中）。你可以在这里看到小提琴：

如果您有交付估算工具，我想在有人点击Checkout链接之前验证是否输入了某些内容。

由于我已经在网站上有jquery验证库，我计划使用它。到目前为止，我有：

if($('#cartForm').length > 0) {
    $('#proceedCheckout').on('click', function (event) {
        console.log('HSA');
        $('#changeCountry').validate({
            errorClass: 'alert-error'
        });
        event.preventDefault();
    });
}

如果您选择退出邮政编码字段，验证将正常工作，但如果您单击结帐按钮，则验证不会触发。我怎么能这样做？

非常感谢

Answer 1

您的代码：

if($('#cartForm').length > 0) {
    $('#proceedCheckout').on('click', function (event) {
        console.log('HSA');
        $('#changeCountry').validate({ // <-- move out of here
            errorClass: 'alert-error'
        });
        event.preventDefault();  // <-- should always be first in a function
    });
}

.validate()应该用于在DOM准备好的表单上初始化插件（及其选项）。由于您在每次点击时都重新初始化，因此您会看到意外行为。

您还#changeCountry定位id，其中id不存在id，因此我在form个标记中添加了相应的$(document).ready(function () { // call .validate() to initialize the plugin $('#changeCountry').validate({ errorClass: 'alert-error' }); // on click, test the form using .valid() $('#proceedCheckout').on('click', function (event) { event.preventDefault(); if ($('#changeCountry').valid()) { $('#cartForm').submit(); // passes validation } else { // failed validation } }); });。

每当您有两个表单并且一个表单的提交取决于另一个表单的验证状态时，请使用the plugin's .valid() method来测试另一个表单。

尝试更像这样的事情：

form

演示：http://jsfiddle.net/B9d8A/

id与#changeCountry true/false上的

$('#changeCountry').validate() initializes the validate plugin。

$('#changeCountry').valid() programmatically triggers an actual validation test并返回{{1}}布尔值。

完整文档：

http://docs.jquery.com/Plugins/Validation

Answer 2

为什么有条件地将click事件添加到按钮？

我在点击事件中进行了购物车测试，这样就不会遇到任何问题，因为点击事件被正确地分配给按钮。

$('#proceedCheckout').on('click', function (event) {
   console.log('HSA');
   if($('#cartForm').length > 0) {
     $('#changeCountry').validate({ errorClass: 'alert-error'  });
     event.preventDefault();
   }
});

使用jquery validate验证辅助表单

2 个答案: