Razor页面上的Bootstrap Validator无法正常工作

问题描述 投票:0回答:1

我有一个Razor页面,我想在提交之前验证。

当我选中它们时,验证似乎有效,但如果我没有单击进出该字段,则不会进行验证。

应该发生的是,应该禁用“提交”按钮,直到验证全部通过。但事实并非如此,它允许我提交。

有任何想法吗?

@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>


}
jquery validation razor twitter-bootstrap-3
1个回答
1
投票

我和你一起使用Bootstrap Validator和Stripe有同样的问题。经过几个小时的挣扎,这就是我想出来的。

Bootstrap验证器不会将实际的disabled属性应用于提交按钮;它只是preventDefaults表单的提交事件。这是为了能够在用户尝试提交时显示表单错误。

同时,Stripe自己创建了preventDefault,然后在创建令牌并将其添加到表单后执行form.submit()

我的最终解决方案是:

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

我在Github上找到了:https://github.com/1000hz/bootstrap-validator/issues/603

© www.soinside.com 2019 - 2024. All rights reserved.