0
제출하기 전에 유효성을 검사하는 면도기 페이지가 있습니다.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>
}