javascript - 在 Bootstrap 验证时启用条纹按钮

Question

我想使用 BootstrapValidator 来验证几个字段并在验证时启用条纹按钮。问题在于，一旦验证任何字段，该按钮就会启用。我试图在验证两个字段后启用条纹按钮。(忽略日期选择器字段)。下面是我的 JavaScript 代码。

$('#myform')
    .bootstrapValidator({
        message: 'This value is not valid',
        //live: 'submitted',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            fname: {
                message: 'The first name is not valid',
                validators: {
                    notEmpty: {
                        message: 'The first name is required and can\'t be empty'
                    },
                    stringLength: {
                        min: 2,
                        max: 30,
                        message: 'The first name must be more than 6 and less than 30 characters long'
                    },
                    /*remote: {
                        url: 'remote.php',
                        message: 'The username is not available'
                    },*/
                    regexp: {
                        regexp: /^[a-zA-Z]+$/,
                        message: 'The first name can only consist of alphabetical letters'
                    }
                }
            },
            lname: {
                message: 'The last name is not valid',
                validators: {
                    notEmpty: {
                        message: 'The last name is required and can\'t be empty'
                    },
                    stringLength: {
                        min: 3,
                        max: 30,
                        message: 'The last name must be more than 6 and less than 30 characters long'
                    },
                    /*remote: {
                        url: 'remote.php',
                        message: 'The username is not available'
                    },*/
                    regexp: {
                        regexp: /^[a-zA-Z]+$/,
                        message: 'The last name can only consist of alphabetical letters'
                    }
                }
            },

        }
    })
    .on('success.form.fv', function(e) {
        // Prevent submit form
        e.preventDefault();

        var $form     = $(e.target),
            validator = $form.data('bootstrapValidator');
        $form.find('#result').html('Thanks for signing up. Now you can sign in as ' + validator.getFieldElements('fname').val()).show();
    });


    $('.stripe-button-el').attr("disabled", true );
});

这是形式:

<form id="myform" method="post" class="form-horizontal">
    <div class="form-group" >
        <label class="col-sm-3 control-label">Full name</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" name="fname" placeholder="First name" id="fname" />
        </div>
        <div class="col-sm-4">
            <input type="text" class="form-control" name="lname" placeholder="Last name" id="lname"  />
        </div>

    </div>



    <div class="form-group">
        <label class="col-sm-3 control-label">Pick a Date</label>
        <div class="col-sm-4">
            <input class="form-control" name="date" type="text" id="datepicker"/>
        </div>
        <div class="col-sm-4">
                <script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
                data-key="<?php echo $stripe['publishable_key']; ?>"
                data-amount="5000" data-zip-code = "true" data-description="Whatever">
                </script>

        </div>
    </div>
    <div class="form-group" >
        <label class="col-sm-4 control-label" id='results'></label>

    </div>



</form>

Answer 1

您需要每次击键时触发一个事件来确定表单是否有效。一旦您知道其有效，您就可以对该按钮执行操作。 BootstrapValidator的 API 包含执行此操作所需的一切(除了捕获事件本身)。

您可以附加此 on您的 $('#myform') 链的方法:

.on('keyup', function() {
    // Get your form's validator
    var validator = $('#myform').data('bootstrapValidator');

    // Validate the form
    validator.validate();

    // Check if the form is valid
    if (validator.isValid()) {
        // Perform action on Stripe button
    }
});