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?

Only show us the rendered HTML output as that's the only thing your JavaScript can see/use anyway. — Sparky
– Sparky, Commented Nov 4, 2016 at 15:57
Perhaps I just need to include a check to see whether the select exists in the DIV before attaching the validator? As there are some DIVs that have no selects while there are not any DIVs which have no inputs — Jay
– Jay, Commented Nov 4, 2016 at 16:19

Sparky · Accepted Answer · 2016-11-04 17:07:48Z

1

Try the .valid() method instead...

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

answered Nov 4, 2016 at 17:07

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using jQuery validate on select list

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related