Materialize CSS - 选择列表验证 [英] Materialize CSS - Select List Validation

问题描述

当尝试使用第三方jQuery验证库与Materialise我无法验证任何选择列表。我想知道如果有人能够或知道如何获得jQuery.validation使用Materialize？

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>

这将呈现：

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

靠近body结尾处呈现ul-li列表：

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>

我使用的脚本将执行：

$('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.

推荐答案

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

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

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

Try adding this code before you call validate method.

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

这篇关于Materialize CSS - 选择列表验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！