用Javascript验证Select属性

Question

我有一个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>

Answer 1

State下拉列表(<select>(以及密码和电话字段(<input type="password">和<input type="tel">(未经过验证，因为您使用的选择器中找不到这些元素：

var curInputs = curStep.find("input[type='text'],input[type='url'], input[type='select']");

相反，您应该使用例如this来获取所有输入字段和所有下拉列表(<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>