使用 Javascript 验证 Select 属性

Question

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>

Answer 1

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 eg 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>