0

当尝试将第三方 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
        }
    }
});

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

4

4 回答 4

4

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

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

$.validator.setDefaults({
       ignore: []
 });
于 2015-06-01T05:15:51.237 回答
1

它没有验证，因为原始选择 DOM 是隐藏的。

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

    // for HTML5 "required" attribute
    $("select[required]").css({position: "absolute", display: "inline", height: 0, padding: 0, width: 0});
});
于 2016-11-03T20:48:09.633 回答
0

使用 jQuery

第一次检查字段是否有值

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

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

if (x != '') {
   $('.select-dropdown').addClass("valid");
}
于 2016-09-22T14:12:28.160 回答
0

问题实际上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);
        }
    });
});
于 2021-11-29T16:17:11.170 回答