我有一个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>
}
答案 0 :(得分：1)
我和你一起使用Bootstrap Validator和Stripe有同样的问题。经过几个小时的挣扎，这就是我想出来的。
Bootstrap验证器不会将实际disabled属性应用于提交按钮;它只是preventDefault表单的提交事件。这是为了能够在用户尝试提交时显示表单错误。
与此同时，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