Using jQuery validate on select list

Question

I have the following javascript:

var $step = $(".wizard-step:visible:last"); // get current step

        var validator = $("#WizardForm").validate(); // obtain validator
        var anyError = false;
        $step.find("input").each(function ()
        {
            if (!validator.element(this)) { // validate every input element inside this step
                anyError = true;
            }

        });

This is successfully validating all my input fields but upon trying to apply a similar method to the select type using code:

$step.find("select").each(function () {
    if (!validator.element(this)) { // validate every input element inside this step
        anyError = true;
    }
});

My HTML is as follows:

<div class="wizard-step" id="step1" visibility="hidden" style="display: block;">
        <div class="row">
            <div class="col-md-6 column ui-sortable">
                <div class="form-group">
                    <label class="control-label col-md-4" for="Tariff_Type">Tariff Type</label>
                    <div class="col-md-8">
                        <select style="width:100%;height:35px;border-radius:4px;padding-left:10px;" id="TariffType" name="TariffType" class="form-control input required">
                            <option value="">Please Select Tariff Type</option>
                            <option value="keypad account">Say Hello To Budget Extra Discount</option>
                            <option value="bill pay account">Standard 24H</option>
                        </select>
                        <span class="field-validation-valid text-danger" data-valmsg-for="TariffType" data-valmsg-replace="true"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

How can I ensure that a TariffType value is selected using this method?

Answer 1

Try the .valid() method instead...

if (! $(this).valid()) { ...