Question

尝试使用Materialize的第三方jQuery验证库时，我无法验证任何选择列表。我想知道是否有人能够或知道如何使用Materialise来使用jQuery.validation？

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

提交表单的结果是，我所需的所有其他表单字段都未成功验证。没有任何操作，选择列表也不会显示错误。这个提供的代码是我尝试在表单上提供的功能的一个小例子。我现在不会有两个具有相同元素的列表。

Answer 1

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

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

wrong

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

Answer 3

使用Jquery

首先检查字段是否有值

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

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

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

实现CSS - 选择列表验证

3 个答案: