I have a small 4 step wizard that will guide a user through a registration process. I have javascript that will make sure that the required fields are valid and to go between the pages in the wizard. I have been unable to get my select dropdown required. I've tried to use the required tag but it doesn't work. Am I forgetting something in my javascript? I want the user to be required to select a State from the dropdown. I also have a few other dropdowns that don't work either. I'm using panel from Bootstrap 3 to house my content. Also the validation is only working on the first page so I'm guessing that I have some problems with my 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>The State dropdown (<select>) and password and telephone fields (<input type="password"> and <input type="tel">) are not validated, because those elements are not found with this selector that you are using:
var curInputs = curStep.find("input[type='text'],input[type='url'], input[type='select']");
You should instead use e.g. this to get all input fields and all dropdowns (<select> elements):
var curInputs = curStep.find("input, select");
This seems to fix the problems you have, though make sure that all inputs that need validation have the required attribute.
Here's your code with the above fix so you can try it:
$(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>