Bootstrap Validator on Razor page not working

Question

I have a Razor page which I want to validate prior to submission.

The validation seems to work when I tab out of them, but if I don't click in and out of the field, the validation doesn't occur.

What should happen is, the Submit button should be disabled until the validation is all passed. However it is not, it allows me to submit anyway.

Any ideas?

@model TechsportiseOnline.Models.RaceEntry
@{
    ViewData["Title"] = "Payment";


    string entrytype = "Unaffiliated";
    if ((Model.Club != null) && (Model.EANumber != null))
    {
        entrytype = "Affiliated";
    }
    else
    {
        entrytype = "Unaffiliated";
    }
}

<h2>Secure Payment</h2>

<p>You are entering <b>@Model.RaceName</b> at the <b>@entrytype</b> price of <b>£@Model.Amount</b></p>
<hr />
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">Card Details <div style="float:right;"><a href="http://www.stripe.com"><img src="~/img/powered_by_stripe.png" alt="Powered By Stripe" /></a></div></div>
                <div class="panel-body">

                    <div class="row">
                        <div class="col-xs-8">
                            <div class="form-group">
                                <label for="txtCardNumber" class="control-label">Card Number *</label>
                                <input type="text" id="txtCardNumber" placeholder="Card Number e.g 1234..." class="form-control" maxlength="16" />
                            </div>
                        </div>
                        <div class="col-xs-4">
                            <div class="form-group">
                                <label for="txtCvc" class="control-label">CVC *</label>
                                <input type="text" id="txtCvc" placeholder="CVC" class="form-control" maxlength="3" />
                            </div>
                        </div>
                        </div>
                            <div class="row">
                                <div class="col-xs-6">
                                    <div class="form-group">
                                        <label for="txtExpiryMonth" class="control-label">Expiry Month *</label>
                                        <input type="text" id="txtExpiryMonth" placeholder="MM" class="form-control" maxlength="2" />
                                    </div>
                                </div>
                                <div class="col-xs-6">
                                    <div class="form-group">
                                        <label for="txtExpiryYear" class="control-label">Expiry Year *</label>
                                        <input type="text" id="txtExpiryYear" placeholder="YYYY" class="form-control" maxlength="4" />
                                    </div>
                                </div>
                            </div>
                            <form method="post"  data-disable="false" asp-action="Charge" asp-controller="Stripe" id="frmCharge" data-toggle="validator" role="form">
                                <div class="form-row">
                                    <div class="col">
                                        <div class="form-group">
                                            <label asp-for="BillingName" class="control-label">Cardholder Name *</label>
                                            <input asp-for="BillingName" class="form-control" required />
                                            <span asp-validation-for="BillingName" class="text-danger"></span>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="form-group">
                                            <label asp-for="BillingEmail" class="control-label">Cardholder Email *</label>
                                            <input type="email" asp-for="BillingEmail" class="form-control" required />
                                            <small id="emailHelp" class="form-text text-muted">Techsportise will never share your email with anyone aside from the race organiser</small>
                                            <span asp-validation-for="BillingEmail" class="text-danger"></span>
                                            <div class="help-block with-errors"></div>
                                        </div>

                                    </div>
                                </div>

                        </div>
                    </div>
                </div>
        <div class="col-md-6">
            <div class="panel panel-default">

                <div class="panel-heading">Cardholder Details</div>
                <div class="panel-body">

                        @Html.HiddenFor(model => model.RaceID)
                        @Html.HiddenFor(model => model.RaceName)
                        @Html.HiddenFor(model => model.Title)
                        @Html.HiddenFor(model => model.FirstName)
                        @Html.HiddenFor(model => model.LastName)
                        @Html.HiddenFor(model => model.DateOfBirth)
                        @Html.HiddenFor(model => model.Gender)
                        @Html.HiddenFor(model => model.EANumber)
                        @Html.HiddenFor(model => model.Club)
                        @Html.HiddenFor(model => model.Email)
                        @Html.HiddenFor(model => model.Team)
                        @Html.HiddenFor(model => model.BibNumber)
                        @Html.HiddenFor(model => model.MobilePhone)
                        @Html.HiddenFor(model => model.Address1)
                        @Html.HiddenFor(model => model.Address2)
                        @Html.HiddenFor(model => model.City)
                        @Html.HiddenFor(model => model.StateCounty)
                        @Html.HiddenFor(model => model.Country)
                        @Html.HiddenFor(model => model.PostCode)
                        @Html.HiddenFor(model => model.EntryType)
                        @Html.HiddenFor(model => model.Premium)
                        @Html.HiddenFor(model => model.Amount)




                        <div class="row">
                            <div class="col-xs-6">
                                <div class="form-group">
                                    <label asp-for="BillingAddress1" class="control-label"></label>
                                    <input asp-for="BillingAddress1" class="form-control" required />
                                    <span asp-validation-for="BillingAddress1" class="text-danger"></span>
                                </div>
                            </div>
                            <div class="col-xs-6">
                                <div class="form-group">
                                    <label asp-for="BillingAddress2" class="control-label"></label>
                                    <input asp-for="BillingAddress2" class="form-control" />
                                    <span asp-validation-for="BillingAddress2" class="text-danger"></span>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-xs-6">
                                <div class="form-group">
                                    <label asp-for="BillingCity" class="control-label"></label>
                                    <input asp-for="BillingCity" class="form-control" />
                                    <span asp-validation-for="BillingCity" class="text-danger"></span>
                                </div>
                            </div>
                            <div class="col-xs-6">
                                <div class="form-group">
                                    <label asp-for="BillingStateCounty" class="control-label"></label>
                                    <input asp-for="BillingStateCounty" class="form-control" />
                                    <span asp-validation-for="BillingStateCounty" class="text-danger"></span>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-xs-6">
                                <div class="form-group">
                                    <label asp-for="BillingPostCode" class="control-label"></label>
                                    <input asp-for="BillingPostCode" class="form-control" required />
                                    <span asp-validation-for="BillingPostCode" class="text-danger"></span>
                                </div>
                            </div>
                            <div class="col-xs-6">
                                <div class="form-group">
                                    <label asp-for="BillingCountry" class="control-label"></label>
                                    <input asp-for="BillingCountry" class="form-control" />
                                    <span asp-validation-for="BillingCountry" class="text-danger"></span>
                                </div>
                            </div>
                        </div>
                         @Html.HiddenFor(model => model.Token, new { id = "hdnToken" })

                </div>

            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-default" id="btnCharge">Make Secure Payment</button>
            </div>

            </form>
        </div>
    </div>
</div>
@section Scripts {

    <script type="text/javascript" src="https://js.stripe.com/v2/"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js"></script>

    <script type="text/javascript">

        $('document').ready(function () {
            Stripe.setPublishableKey('#hidden#');

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

                Stripe.card.createToken({
                    number: $('#txtCardNumber').val(),
                    cvc: $('#txtCvc').val(),
                    exp_month: $('#txtExpiryMonth').val(),
                    exp_year: $('#txtExpiryYear').val()
                }, stripeResponseHandler);
            });

            function stripeResponseHandler(status, response) {
                var $form = $('#frmCharge');

                if (response.error) {
                    // Show the errors on the form
                    alert(response.error.message);
                } else {
                    // response contains id and card, which contains additional card details
                    var token = response.id;
                    // Insert the token into the form so it gets submitted to the server
                    $('#hdnToken').val(token);
                    // and submit
                    $form.get(0).submit();
                }
            }
        });


    </script>


}

Answer 1

I had the same problem as you, using Bootstrap Validator together with Stripe. After grappling for several hours, this is what I came up with.

The Bootstrap validator doesn't apply an actual disabled attribute to the submit button; it simply preventDefaults the form's submit event. This is in order to be able to display form errors when the user tries to submit.

Meanwhile, Stripe does its own preventDefault and then does form.submit() after creating the token and adding it to the form.

The final solution for me was:

if (!$(form).data('bs.validator').validate().hasErrors()) {
    // Submit the form
    form.submit();
}

Which I found on Github: https://github.com/1000hz/bootstrap-validator/issues/603