Materialize CSS - Select List Validation

问题

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.

回答1:

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

Try adding this code before you call validate method.

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

回答2:

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});
});

回答3:

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");
}

来源：https://stackoverflow.com/questions/30244754/materialize-css-select-list-validation

标签

javascript

css

materialize