引导验证器使表单提交在第二次点击时触发

Question

我正在尝试通过单击提交按钮提交表单，该按钮被阻止执行其默认操作并尝试首先检查条件。

这是我的代码：

$('#payment-form').bootstrapValidator({
        live: 'disabled',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            cardNumber: {
                validators: {
                    notEmpty: {
                        message: $('#cardNumber').attr('data-error-required')
                    }
                }
            }

        }
    });

    $('#paymentSubmit').on('click', function (e) {
        e.preventDefault();

        var $form = $('#payment-form');

        if(basket.length >= 1 || basketTotalPrice > 0){    
            $form.bootstrapValidator('validate');
            if ($form.bootstrapValidator('isValid')) {
                $form.submit();
            }
        }
        else {
            console.log('basket empty');
        }
    })

表单在第一次点击时被验证并且没有提交，并且在第二次点击时提交触发！

Answer 1

我认为这是你的问题：

 if(basket.length >= 1 || basketTotalPrice > 0){    
        $form.bootstrapValidator('validate');
        if ($form.bootstrapValidator('isValid')) {
            $form.submit();
        }
    }

似乎正在发生的是这条线

 $form.bootstrapValidator('validate'); 

正在完成其工作并运行验证，但验证在跳转到此行之前未完成：

if ($form.bootstrapValidator('isValid')) {

这就是它的问题开始的地方。它没有通过你的第二个条件，因为它还没有完成设置它的有效条件。然后，在它失败后，检查验证完成并将您的条件设置为有效。第二次单击时，验证已经发生，因此表单提交。

要解决此问题，您需要保留第二个条件，直到您确定验证已首先完成。验证器的回调将是完美的。