Reply To: Validate Selects
Porto Admin 1.4.2+
HTML:
<form id="selects-form" action="forms-validation.html"> <section class="panel"> <header class="panel-heading"> <div class="panel-actions"> <a href="#" class="panel-action panel-action-toggle" data-panel-toggle></a> <a href="#" class="panel-action panel-action-dismiss" data-panel-dismiss></a> </div> <h2 class="panel-title">Validation Selects</h2> <p class="panel-subtitle"> Easily validate select tags, does not matter if is single or multiple. </p> </header> <div class="panel-body"> <div class="form-group"> <label class="col-sm-3 control-label">Company</label> <div class="col-sm-9"> <select id="company" class="form-control" title="Please select at least one company" required> <option value="">Choose a Company</option> <option value="apple">Apple</option> <option value="google">Google</option> <option value="microsoft">Microsoft</option> <option value="yahoo">Yahoo</option> </select> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">Browsers</label> <div class="col-sm-9"> <select id="browsers" name="browsers" title="Please select at least one browser" class="form-control" size="5" multiple="multiple" required> <option value="chrome">Chrome / Safari</option> <option value="ff">Firefox</option> <option value="ie">Internet Explorer</option> <option value="opera">Opera</option> </select> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">State</label> <div class="col-sm-9"> <select id="states" name="states" data-plugin-selectTwo class="form-control populate" title="Please select at least one state" required> <option value="">Choose a State</option> <option value="AK">Alaska</option> <option value="HI">Hawaii</option> <option value="CA">California</option> <option value="NV">Nevada</option> <option value="OR">Oregon</option> <option value="WA">Washington</option> <option value="AZ">Arizona</option> <option value="CO">Colorado</option> <option value="ID">Idaho</option> <option value="MT">Montana</option> <option value="NE">Nebraska</option> <option value="NM">New Mexico</option> <option value="ND">North Dakota</option> <option value="UT">Utah</option> <option value="WY">Wyoming</option> <option value="AL">Alabama</option> <option value="AR">Arkansas</option> <option value="IL">Illinois</option> <option value="IA">Iowa</option> <option value="KS">Kansas</option> <option value="KY">Kentucky</option> <option value="LA">Louisiana</option> <option value="MN">Minnesota</option> <option value="MS">Mississippi</option> <option value="MO">Missouri</option> <option value="OK">Oklahoma</option> <option value="SD">South Dakota</option> <option value="TX">Texas</option> <option value="TN">Tennessee</option> <option value="WI">Wisconsin</option> <option value="CT">Connecticut</option> <option value="DE">Delaware</option> <option value="FL">Florida</option> <option value="GA">Georgia</option> <option value="IN">Indiana</option> <option value="ME">Maine</option> <option value="MD">Maryland</option> <option value="MA">Massachusetts</option> <option value="MI">Michigan</option> <option value="NH">New Hampshire</option> <option value="NJ">New Jersey</option> <option value="NY">New York</option> <option value="NC">North Carolina</option> <option value="OH">Ohio</option> <option value="PA">Pennsylvania</option> <option value="RI">Rhode Island</option> <option value="SC">South Carolina</option> <option value="VT">Vermont</option> <option value="VA">Virginia</option> <option value="WV">West Virginia</option> </select> </div> </div> <div class="form-group"> <label class="col-md-3 control-label">Multi-Value Select</label> <div class="col-md-9"> <select id="states2" name="states2" multiple data-plugin-selectTwo class="form-control populate" title="Please select at least one state" required> <optgroup label="Alaskan/Hawaiian Time Zone"> <option value="AK">Alaska</option> <option value="HI">Hawaii</option> </optgroup> <optgroup label="Pacific Time Zone"> <option value="CA">California</option> <option value="NV">Nevada</option> <option value="OR">Oregon</option> <option value="WA">Washington</option> </optgroup> <optgroup label="Mountain Time Zone"> <option value="AZ">Arizona</option> <option value="CO">Colorado</option> <option value="ID">Idaho</option> <option value="MT">Montana</option> <option value="NE">Nebraska</option> <option value="NM">New Mexico</option> <option value="ND">North Dakota</option> <option value="UT">Utah</option> <option value="WY">Wyoming</option> </optgroup> <optgroup label="Central Time Zone"> <option value="AL">Alabama</option> <option value="AR">Arkansas</option> <option value="IL">Illinois</option> <option value="IA">Iowa</option> <option value="KS">Kansas</option> <option value="KY">Kentucky</option> <option value="LA">Louisiana</option> <option value="MN">Minnesota</option> <option value="MS">Mississippi</option> <option value="MO">Missouri</option> <option value="OK">Oklahoma</option> <option value="SD">South Dakota</option> <option value="TX">Texas</option> <option value="TN">Tennessee</option> <option value="WI">Wisconsin</option> </optgroup> <optgroup label="Eastern Time Zone"> <option value="CT">Connecticut</option> <option value="DE">Delaware</option> <option value="FL">Florida</option> <option value="GA">Georgia</option> <option value="IN">Indiana</option> <option value="ME">Maine</option> <option value="MD">Maryland</option> <option value="MA">Massachusetts</option> <option value="MI">Michigan</option> <option value="NH">New Hampshire</option> <option value="NJ">New Jersey</option> <option value="NY">New York</option> <option value="NC">North Carolina</option> <option value="OH">Ohio</option> <option value="PA">Pennsylvania</option> <option value="RI">Rhode Island</option> <option value="SC">South Carolina</option> <option value="VT">Vermont</option> <option value="VA">Virginia</option> <option value="WV">West Virginia</option> </optgroup> </select> </div> </div> </div> <footer class="panel-footer"> <div class="row"> <div class="col-sm-9 col-sm-offset-3"> <button class="btn btn-primary">Submit</button> <button type="reset" class="btn btn-default">Reset</button> </div> </div> </footer> </section> </form>
JS:
(function() {
'use strict';
// selects
$("#selects-form").each(function() {
$(this).validate({
errorPlacement: function( error, element ) {
if (element.hasClass('select2-hidden-accessible')) {
error.appendTo(element.parent());
} else {
error.insertAfter(element);
}
}
});
});
}).apply( this, [ jQuery ]);
Note that you need the jquery.validate and the select2 plugins in the page.