When trying to use a third party jQuery Validation Library with Materialize I am unable to validate any Select Lists. I was wondering if anyone is able to or knows how to get jQuery.validation working with Materialize?

<div class="row">
    <div class="input-field col s12 m6">
        @Html.DropDownListFor(model =>model.Gender,Models.StaticLists.GenderListItems(), new { @class = "validate[required]", required = "required", Name="Gender"})
        <label for="Gender">Gender:<em class="form-req">*</em></label>
    </div>
</div>

This will render out to:

<div class="row">
    <div class="input-field col s12 m6">
        <div class="select-wrapper">
            <input type="text" class="select-dropdown required" readonly="true" data-activates="select-options-7a42c777-60c4-6318-3eef-7ff50a96b3a8" value=" " required="required" id="materialGender" name="materialGender" aria-required="true">
            <i class="mdi-navigation-arrow-drop-down active"></i>
            <select name="Gender" class="validate[required] initialized" data-val="true" data-val-required="The Gender field is required." id="Gender" required="required" aria-required="true">
                <option disabled="disabled" selected="selected" value=" "> </option>
                <option value="F">Female</option>
                <option value="M">Male</option>
            </select>
        </div>
        <label for="Gender" class="">Gender:<em class="form-req">*</em></label>
    </div>
</div>

Towards the end of the body the ul-li list gets rendered:

<ul id="select-options-7a42c777-60c4-6318-3eef-7ff50a96b3a8" class="dropdown-content select-dropdown" style="width: 397px; display: none; top: 558.734375px; left: 315px; height: 134px; opacity: 0;">
    <li class="disabled active"><span> </span></li>
    <li class=""><span>Female</span></li>
    <li class=""><span>Male</span></li>    
</ul>

The script that I am using will do:

$('select').material_select();
$('.select-wrapper input').attr("required", "required").each(function (index, item) {
    $selectSibling = $(item).siblings('select');
    $(item).attr("id", "material" + $selectSibling.attr("id"));
    $(item).attr("name", "material" + $selectSibling.attr("name"));
}).addClass("required");
$("#registerForm").validate({
    rules:{
        materialGenderType:{
            required: true
        }
    }
});

The result of submitting the form is that all of my other form fields that are required and not filled out successfully validate. Nothing occurs and no errors are displayed with the Select Lists. This provided code is a small example of the functionality that I am trying to provide on my form. I wont get into having two lists with the same elements at this time.

When trying to use a third party jQuery Validation Library with Materialize I am unable to validate any Select Lists. I was wondering if anyone is able to or knows how to get jQuery.validation working with Materialize?

<div class="row">
    <div class="input-field col s12 m6">
        @Html.DropDownListFor(model =>model.Gender,Models.StaticLists.GenderListItems(), new { @class = "validate[required]", required = "required", Name="Gender"})
        <label for="Gender">Gender:<em class="form-req">*</em></label>
    </div>
</div>

This will render out to:

<div class="row">
    <div class="input-field col s12 m6">
        <div class="select-wrapper">
            <input type="text" class="select-dropdown required" readonly="true" data-activates="select-options-7a42c777-60c4-6318-3eef-7ff50a96b3a8" value=" " required="required" id="materialGender" name="materialGender" aria-required="true">
            <i class="mdi-navigation-arrow-drop-down active"></i>
            <select name="Gender" class="validate[required] initialized" data-val="true" data-val-required="The Gender field is required." id="Gender" required="required" aria-required="true">
                <option disabled="disabled" selected="selected" value=" "> </option>
                <option value="F">Female</option>
                <option value="M">Male</option>
            </select>
        </div>
        <label for="Gender" class="">Gender:<em class="form-req">*</em></label>
    </div>
</div>

Towards the end of the body the ul-li list gets rendered:

<ul id="select-options-7a42c777-60c4-6318-3eef-7ff50a96b3a8" class="dropdown-content select-dropdown" style="width: 397px; display: none; top: 558.734375px; left: 315px; height: 134px; opacity: 0;">
    <li class="disabled active"><span> </span></li>
    <li class=""><span>Female</span></li>
    <li class=""><span>Male</span></li>    
</ul>

The script that I am using will do:

$('select').material_select();
$('.select-wrapper input').attr("required", "required").each(function (index, item) {
    $selectSibling = $(item).siblings('select');
    $(item).attr("id", "material" + $selectSibling.attr("id"));
    $(item).attr("name", "material" + $selectSibling.attr("name"));
}).addClass("required");
$("#registerForm").validate({
    rules:{
        materialGenderType:{
            required: true
        }
    }
});

The result of submitting the form is that all of my other form fields that are required and not filled out successfully validate. Nothing occurs and no errors are displayed with the Select Lists. This provided code is a small example of the functionality that I am trying to provide on my form. I wont get into having two lists with the same elements at this time.

• javascript
• css
• materialize

• Please show your code, what you have tried up to this point, and what errors you are receiving. – Travis Heeter Commented May 14, 2015 at 18:38
• possible duplicate of Materialize CSS - Select Doesn't Seem to Render – Travis Heeter Commented May 14, 2015 at 18:40
• Selects correctly render I am unable to use validation on them when submitting the form with the jquery.validation library. – cjweiner Commented May 14, 2015 at 19:00
• @TravisHeeter not the case. That question is for rendering material design UI, but not material validation (UX). – NaN Commented Nov 29, 2021 at 15:10

4 Answers 4

By default hidden fields are not validated by jquery validation plugin.

Try adding this code before you call validate method.

$.validator.setDefaults({
       ignore: []
 });

It's not validating because the original select DOM is hidden.

$(document).ready(function() {
    $("select").material_select();

    // for HTML5 "required" attribute
    $("select[required]").css({position: "absolute", display: "inline", height: 0, padding: 0, width: 0});
});

Using Jquery

1st check if field has value

var x = $('#fieldId').val();

Then apply valid class to select dropdown class

if (x != '') {
   $('.select-dropdown').addClass("valid");
}

The problem is actually with the rendered input that replaces the select element. It is irrelevant that this select is hidden or not. The Materialize CSS engine does not verify if your select element is required or has the validate class. I don't know why they didn't put that code I will show you below, but that will solve the problem if you put it in a JavaScript file in your page:

$(document).ready(function(){
    $('.tooltipped').tooltip(); // dica que aparece quando o usuário põe o mouse em cima do ponente
    $('select').formSelect(); // montagem de campos <select>  material design
    // isto corrige o problema de renderização em campos select que exigem validação quando o campo é de preenchimento obrigatório
    const _requiredSelects = $("select[required].validate");
    _requiredSelects.parent().find('input').addClass('validate').attr('required', true)
    .keydown(function($event) { 
        return $event.keyCode == 9;
    });
    _requiredSelects.change(function($event) { 
        const _select = $event.target;
        const _value = $(_select).val();
        const _input = $(_select).parent().find('input');
        _input.removeAttr('readonly', '');
        _input.val(_select.options[_select.options.selectedIndex].label);
        if (_value != '') {
            _input.addClass('valid');
            _input.removeClass('invalid');
        } else {
            _input.addClass('invalid');
            _input.removeClass('valid');
        }
    });
    _requiredSelects.each(function(){
        const _this = $(this);
        const _helper = _this.parent().parent().find('.helper-text');
        if (_helper !== undefined) {
            const _input = _this.parent().find('input');
            _helper.insertAfter(_input);
        }
    });
});