javascript - 使用 Javascript 验证 Select 属性
问题描述
我有一个小型的 4 步向导，它将指导用户完成注册过程。我有 javascript 可以确保必填字段有效并在向导中的页面之间切换。我一直无法获得所需的选择下拉菜单。我尝试使用所需的标签，但它不起作用。我在我的javascript中忘记了什么吗？我希望用户需要从下拉列表中选择一个状态。我还有一些其他的下拉菜单也不起作用。我正在使用 Bootstrap 3 中的面板来存放我的内容。此外，验证仅在第一页上有效，所以我猜我的 javascript 有一些问题
$(document).ready(function () {
var navListItems = $('div.setup-panel div a'),
allWells = $('.setup-content'),
allNextBtn = $('.nextBtn');
allWells.hide();
navListItems.click(function (e) {
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this);
if (!$item.hasClass('disabled')) {
navListItems.removeClass('btn-success').addClass('btn-default');
$item.addClass('btn-success');
allWells.hide();
$target.show();
$target.find('input:eq(0)').focus();
}
});
allNextBtn.click(function () {
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
curInputs = curStep.find("input[type='text'],input[type='url'], input[type='select']"),
isValid = true;
$(".form-group").removeClass("has-error");
for (var i = 0; i < curInputs.length; i++) {
if (!curInputs[i].validity.valid) {
isValid = false;
$(curInputs[i]).closest(".form-group").addClass("has-error");
}
}
if (isValid) nextStepWizard.removeAttr('disabled').trigger('click');
});
$('div.setup-panel div a.btn-success').trigger('click');
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
<div class="stepwizard">
<div class="stepwizard-row setup-panel">
<div class="stepwizard-step col-xs-3">
<a href="#step-1" type="button" class="btn btn-success btn-circle">1</a>
<p><small>Personal Information</small></p>
</div>
<div class="stepwizard-step col-xs-3">
<a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled">2</a>
<p><small>Security</small></p>
</div>
<div class="stepwizard-step col-xs-3">
<a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled">3</a>
<p><small>Church Affiliation</small></p>
</div>
<div class="stepwizard-step col-xs-3">
<a href="#step-4" type="button" class="btn btn-default btn-circle" disabled="disabled">4</a>
<p><small>Payment</small></p>
</div>
</div>
</div>
<form action="/login/Create" method="post" id="payment-form">
<div class="panel panel-primary setup-content" id="step-1">
<div class="panel-heading">
<h3 class="panel-title">Personal Information</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="form-group col-md-6">
<label class="control-label">First Name</label>
<input maxlength="100" type="text" required="required" class="form-control" name="fname" id="fname" placeholder="Enter First Name" />
</div>
<div class="form-group col-md-6">
<label class="control-label">Last Name</label>
<input maxlength="100" type="text" required="required" class="form-control" name="lname" id="lname" placeholder="Enter Last Name" />
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="control-label">Company</label>
<input maxlength="100" type="text" class="form-control" name="company" id="company" placeholder="Company" />
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="control-label">Address</label>
<input maxlength="100" type="text" required="required" class="form-control" name="address" id="address" placeholder="Address" />
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="control-label">Address 2</label>
<input maxlength="100" type="text" class="form-control" name="address2" id="address2" placeholder="Address 2" />
</div>
</div>
<div class="row">
<div class="form-group col-md-4">
<label class="control-label">City</label>
<input maxlength="100" type="text" required="required" class="form-control" name="city" id="city" placeholder="City" />
</div>
<div class="form-group col-md-4">
<label class="control-label">State</label>
<select class="form-control" name="state" id="state" required>
<option value="">Select</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AS">American Samoa</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="GU">Guam</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Ilinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="MP">Northern Mariana Island</option>
<option value="OH">Ohio</option>
<option value="OK">Oaklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="PR">Puerto Rico</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">Soth Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="VI">Virgin Islands</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
<div class="form-group col-md-4">
<label class="control-label">Zip</label>
<input maxlength="100" type="text" required="required" class="form-control" name="zip" id="zip" placeholder="Zip" />
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="control-label">Phone</label>
<input maxlength="100" type="tel" class="form-control" name="phone" id="phone" placeholder="Phone" />
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="control-label">Cell Phone</label>
<input maxlength="100" type="tel" required="required" class="form-control" name="cell" id="cell" placeholder="Cell Phone" />
</div>
</div>
<button class="btn btn-primary nextBtn pull-right" type="button">Next</button>
</div>
</div>
<div class="panel panel-primary setup-content" id="step-2">
<div class="panel-heading">
<h3 class="panel-title">Account Security</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="form-group col-md-12">
<label class="control-label">Password</label>
<input maxlength="200" type="password" required class="form-control" name="password" id="password" placeholder="Password" />
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="control-label">Confirm Password</label>
<input maxlength="200" type="password" required="required" class="form-control" name="cnfPassword" id="cnfPassword" placeholder="Confirm Password" />
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="control-label">Security Question</label>
<select name="secQuestion"required class="form-control">
<option value="">Select</option>
@{
foreach (var secretquestion in Model.securityquestions)
{
<option value="@secretquestion.id">@secretquestion.Question</option>
}
}
</select>
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="control-label">Security Answer</label>
<input maxlength="200" type="password" required="required" class="form-control" name="secAnswer" id="secAnswer" placeholder="Confirm Password" />
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="control-label">Account PIN</label>
<input maxlength="6" type="password" required="required" class="form-control" name="pin" id="pin" placeholder="PIN" />
</div>
</div>
<button class="btn btn-primary nextBtn pull-right" type="button">Next</button>
</div>
</div>
<div class="panel panel-primary setup-content" id="step-3">
<div class="panel-heading">
<h3 class="panel-title">Church Affiliation</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="form-group col-md-6">
<label class="control-label">Church Affiliation 1</label><br />
<select class="form-control select2" style="width:100%" name="chAffil1" id="chAffil1">
<option value="">None</option>
@{
foreach (var churches in Model.churches)
{
<option value="@churches.id">@churches.ChurchName @churches.ChuchDenomination @churches.ChurchType - @churches.ChurchCity, @churches.ChurchState </option>
}
}
</select>
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label class="control-label">Church Affiliation 2</label><br />
<select class="form-control select2" style="width:100%" name="chAffil2" id="chAffil2">
<option value"">None</option>
@{
foreach (var churches in Model.churches)
{
<option value="@churches.id">@churches.ChurchName @churches.ChuchDenomination @churches.ChurchType - @churches.ChurchCity, @churches.ChurchState </option>
}
}
</select>
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label class="control-label">Church Affiliation 3</label><br />
<select class="form-control select2" style="width:100%" name="chAffil3" id="chAffil3">
<option value="">None</option>
@{
foreach (var churches in Model.churches)
{
<option value="@churches.id">@churches.ChurchName @churches.ChuchDenomination @churches.ChurchType - @churches.ChurchCity, @churches.ChurchState </option>
}
}
</select>
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label class="control-label">Church Affiliation 4</label><br />
<select class="select2 form-control" style="width:100%" name="chAffil4" id="chAffil4">
<option value="">None</option>
@{
foreach (var churches in Model.churches)
{
<option value="@churches.id">@churches.ChurchName @churches.ChuchDenomination @churches.ChurchType - @churches.ChurchCity, @churches.ChurchState </option>
}
}
</select>
</div>
</div>
<button class="btn btn-primary nextBtn pull-right" type="button">Next</button>
</div>
</div>
<div class="panel panel-primary setup-content" id="step-4">
<div class="panel-heading">
<h3 class="panel-title">Payment</h3>
</div>
<div class="panel-body">
<div class="form-group">
<label for="cardName">Name on Card</label>
<input type="text" name="cardName" class="form-control" id="cardName" placeholder="Name on Card">
</div>
<div class="form-group">
<label for="card-number">
Credit or debit card
</label>
<div id="card-number">
<!-- A Stripe Element will be inserted here. -->
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-6">
<label for="card-vc">
CVC
</label>
<div id="card-cvc">
<!-- A Stripe Element will be inserted here. -->
</div>
</div>
<div class="col-md-6">
<label for="card-expiration">
Exp
</label>
<div id="card-expiration">
<!-- A Stripe Element will be inserted here. -->
</div>
</div>
</div>
</div>
<!-- Used to display form errors. -->
<div id="card-errors" role="alert"></div>
<div class="form-group">
<button class="form-control btn btn-primary" type="submit">Submit Payment</button>
</div>
</div>
</div>
</form>
</div>解决方案
状态下拉列表 ( <select>) 以及密码和电话字段 ( <input type="password">and <input type="tel">) 未经过验证，因为您正在使用的此选择器找不到这些元素：
var curInputs = curStep.find("input[type='text'],input[type='url'], input[type='select']");
您应该使用例如它来获取所有输入字段和所有下拉列表（<select>元素）：
var curInputs = curStep.find("input, select");
这似乎解决了您遇到的问题，但请确保所有需要验证的输入都具有该required属性。
这是带有上述修复的代码，因此您可以尝试一下：
$(document).ready(function () {
var navListItems = $('div.setup-panel div a'),
allWells = $('.setup-content'),
allNextBtn = $('.nextBtn');
allWells.hide();
navListItems.click(function (e) {
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this);
if (!$item.hasClass('disabled')) {
navListItems.removeClass('btn-success').addClass('btn-default');
$item.addClass('btn-success');
allWells.hide();
$target.show();
$target.find('input:eq(0)').focus();
}
});
allNextBtn.click(function () {
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
curInputs = curStep.find("input, select"),
isValid = true;
$(".form-group").removeClass("has-error");
for (var i = 0; i < curInputs.length; i++) {
if (!curInputs[i].validity.valid) {
isValid = false;
$(curInputs[i]).closest(".form-group").addClass("has-error");
}
}
if (isValid) nextStepWizard.removeAttr('disabled').trigger('click');
});
$('div.setup-panel div a.btn-success').trigger('click');
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
<div class="stepwizard">
<div class="stepwizard-row setup-panel">
<div class="stepwizard-step col-xs-3">
<a href="#step-1" type="button" class="btn btn-success btn-circle">1</a>
<p><small>Personal Information</small></p>
</div>
<div class="stepwizard-step col-xs-3">
<a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled">2</a>
<p><small>Security</small></p>
</div>
<div class="stepwizard-step col-xs-3">
<a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled">3</a>
<p><small>Church Affiliation</small></p>
</div>
<div class="stepwizard-step col-xs-3">
<a href="#step-4" type="button" class="btn btn-default btn-circle" disabled="disabled">4</a>
<p><small>Payment</small></p>
</div>
</div>
</div>
<form action="/login/Create" method="post" id="payment-form">
<div class="panel panel-primary setup-content" id="step-1">
<div class="panel-heading">
<h3 class="panel-title">Personal Information</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="form-group col-md-6">
<label class="control-label">First Name</label>
<input maxlength="100" type="text" required="required" class="form-control" name="fname" id="fname" placeholder="Enter First Name" />
</div>
<div class="form-group col-md-6">
<label class="control-label">Last Name</label>
<input maxlength="100" type="text" required="required" class="form-control" name="lname" id="lname" placeholder="Enter Last Name" />
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="control-label">Company</label>
<input maxlength="100" type="text" class="form-control" name="company" id="company" placeholder="Company" />
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="control-label">Address</label>
<input maxlength="100" type="text" required="required" class="form-control" name="address" id="address" placeholder="Address" />
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="control-label">Address 2</label>
<input maxlength="100" type="text" class="form-control" name="address2" id="address2" placeholder="Address 2" />
</div>
</div>
<div class="row">
<div class="form-group col-md-4">
<label class="control-label">City</label>
<input maxlength="100" type="text" required="required" class="form-control" name="city" id="city" placeholder="City" />
</div>
<div class="form-group col-md-4">
<label class="control-label">State</label>
<select class="form-control" name="state" id="state" required>
<option value="">Select</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AS">American Samoa</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="GU">Guam</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Ilinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="MP">Northern Mariana Island</option>
<option value="OH">Ohio</option>
<option value="OK">Oaklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="PR">Puerto Rico</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">Soth Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="VI">Virgin Islands</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
<div class="form-group col-md-4">
<label class="control-label">Zip</label>
<input maxlength="100" type="text" required="required" class="form-control" name="zip" id="zip" placeholder="Zip" />
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="control-label">Phone</label>
<input maxlength="100" type="tel" class="form-control" name="phone" id="phone" placeholder="Phone" />
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="control-label">Cell Phone</label>
<input maxlength="100" type="tel" required="required" class="form-control" name="cell" id="cell" placeholder="Cell Phone" />
</div>
</div>
<button class="btn btn-primary nextBtn pull-right" type="button">Next</button>
</div>
</div>
<div class="panel panel-primary setup-content" id="step-2">
<div class="panel-heading">
<h3 class="panel-title">Account Security</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="form-group col-md-12">
<label class="control-label">Password</label>
<input maxlength="200" type="password" required class="form-control" name="password" id="password" placeholder="Password" />
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="control-label">Confirm Password</label>
<input maxlength="200" type="password" required="required" class="form-control" name="cnfPassword" id="cnfPassword" placeholder="Confirm Password" />
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="control-label">Security Question</label>
<select name="secQuestion"required class="form-control">
<option value="">Select</option>
@{
foreach (var secretquestion in Model.securityquestions)
{
<option value="@secretquestion.id">@secretquestion.Question</option>
}
}
</select>
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="control-label">Security Answer</label>
<input maxlength="200" type="password" required="required" class="form-control" name="secAnswer" id="secAnswer" placeholder="Confirm Password" />
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="control-label">Account PIN</label>
<input maxlength="6" type="password" required="required" class="form-control" name="pin" id="pin" placeholder="PIN" />
</div>
</div>
<button class="btn btn-primary nextBtn pull-right" type="button">Next</button>
</div>
</div>
<div class="panel panel-primary setup-content" id="step-3">
<div class="panel-heading">
<h3 class="panel-title">Church Affiliation</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="form-group col-md-6">
<label class="control-label">Church Affiliation 1</label><br />
<select class="form-control select2" style="width:100%" name="chAffil1" id="chAffil1">
<option value="">None</option>
@{
foreach (var churches in Model.churches)
{
<option value="@churches.id">@churches.ChurchName @churches.ChuchDenomination @churches.ChurchType - @churches.ChurchCity, @churches.ChurchState </option>
}
}
</select>
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label class="control-label">Church Affiliation 2</label><br />
<select class="form-control select2" style="width:100%" name="chAffil2" id="chAffil2">
<option value"">None</option>
@{
foreach (var churches in Model.churches)
{
<option value="@churches.id">@churches.ChurchName @churches.ChuchDenomination @churches.ChurchType - @churches.ChurchCity, @churches.ChurchState </option>
}
}
</select>
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label class="control-label">Church Affiliation 3</label><br />
<select class="form-control select2" style="width:100%" name="chAffil3" id="chAffil3">
<option value="">None</option>
@{
foreach (var churches in Model.churches)
{
<option value="@churches.id">@churches.ChurchName @churches.ChuchDenomination @churches.ChurchType - @churches.ChurchCity, @churches.ChurchState </option>
}
}
</select>
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label class="control-label">Church Affiliation 4</label><br />
<select class="select2 form-control" style="width:100%" name="chAffil4" id="chAffil4">
<option value="">None</option>
@{
foreach (var churches in Model.churches)
{
<option value="@churches.id">@churches.ChurchName @churches.ChuchDenomination @churches.ChurchType - @churches.ChurchCity, @churches.ChurchState </option>
}
}
</select>
</div>
</div>
<button class="btn btn-primary nextBtn pull-right" type="button">Next</button>
</div>
</div>
<div class="panel panel-primary setup-content" id="step-4">
<div class="panel-heading">
<h3 class="panel-title">Payment</h3>
</div>
<div class="panel-body">
<div class="form-group">
<label for="cardName">Name on Card</label>
<input type="text" name="cardName" class="form-control" id="cardName" placeholder="Name on Card">
</div>
<div class="form-group">
<label for="card-number">
Credit or debit card
</label>
<div id="card-number">
<!-- A Stripe Element will be inserted here. -->
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-6">
<label for="card-vc">
CVC
</label>
<div id="card-cvc">
<!-- A Stripe Element will be inserted here. -->
</div>
</div>
<div class="col-md-6">
<label for="card-expiration">
Exp
</label>
<div id="card-expiration">
<!-- A Stripe Element will be inserted here. -->
</div>
</div>
</div>
</div>
<!-- Used to display form errors. -->
<div id="card-errors" role="alert"></div>
<div class="form-group">
<button class="form-control btn btn-primary" type="submit">Submit Payment</button>
</div>
</div>
</div>
</form>
</div>推荐阅读
- r - 使用 R 中的特殊字符访问主题的帮助页面
- django - Django admin list_filter return ''str' object has no attribute 'days' for DurationField
- c# - 选择并单击 iframe
- python - plt.show() 不会在 jupyter 笔记本上渲染图像
- r - 连接ggplot2中geom_jitter点的线
- ruby-on-rails - 如何从动态生成的表单提交输入？
- android - 应用程序可能在其主线程上做了太多工作。飘飘然
- asp.net-core - ASP.NET Core Url 仅重写子站点的域名 www.olddomain.com/subsite
- linux - Linux中是否有任何内核函数可以将文件描述符转换为磁盘驱动器中的逻辑地址？
- firebase - 当应用程序进入前台时，Flutter FirebaseMessaging 通知会自动删除