Materialise CSS - 选择列表验证答案

【问题标题】：Materialize CSS - Select List ValidationMaterialise CSS - 选择列表验证
【发布时间】：2015-05-14 18:34:15
【问题描述】：

当尝试将第三方 jQuery 验证库与 Materialize 一起使用时，我无法验证任何选择列表。我想知道是否有人能够或知道如何让 jQuery.validation 与 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>

这将渲染到：

<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>

在正文的末尾，ul-li 列表被渲染：

<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>

我正在使用的脚本可以：

$('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
        }
    }
});

提交表单的结果是我所有其他必填但未填写成功的表单字段验证。选择列表不会发生任何事情，也不会显示任何错误。这个提供的代码是我试图在我的表单上提供的功能的一个小例子。目前我不会考虑拥有两个具有相同元素的列表。

【问题讨论】：

请显示您的代码、到目前为止您尝试过的内容以及收到的错误。
Materialize CSS - Select Doesn't Seem to Render 的可能重复项
选择正确渲染我无法在使用 jquery.validation 库提交表单时对它们使用验证。
@TravisHeeter 并非如此。这个问题是针对渲染材料设计 UI 的，而不是针对材料验证 (UX)。

标签： javascript css materialize

【解决方案1】：

默认情况下，jquery 验证插件不会验证隐藏字段。

在调用 validate 方法之前尝试添加此代码。

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

【讨论】：

【解决方案2】：

由于原始选择 DOM 已隐藏，因此无法验证。

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

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

【讨论】：

【解决方案3】：

使用 Jquery

第一次检查字段是否有值

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

然后应用有效的类来选择下拉类

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

【讨论】：

【解决方案4】：

问题实际上在于渲染的input 替换了select 元素。此选择是否隐藏无关紧要。 Materialize CSS 引擎不会验证您的选择元素是否是必需的或具有validate 类。我不知道他们为什么没有把我将在下面展示给你的代码，但是如果你把它放在你页面中的 JavaScript 文件中，这将解决问题：

$(document).ready(function(){
    $('.tooltipped').tooltip(); // dica que aparece quando o usuário põe o mouse em cima do componente
    $('select').formSelect(); // montagem de campos <select> com 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);
        }
    });
});

【讨论】：