Html 物化框架-所需字段的验证不起作用

我使用的是MaterializeCSS框架，表单验证不起作用

电子邮件验证工作正常：

<div class="row">
        <div class="input-field col s12 m5 offset-m3">
            <i class="material-icons prefix">email</i>
            <input type="email" id="input_email" name="email" class="validate" />
            <label for="input_email" data-error="Please enter a valid email address">Email</label>
        </div>
    </div>

电子邮件
电子邮件

然而，当涉及到一个简单的必填字段时，验证不起作用

<div class="row">
        <div class="input-field col s12 m5 offset-m3">
            <i class="material-icons prefix">account_circle</i>
            <input type="text" id="input_name" data-error="Please enter your name" name="input_name" class="validate" required="required" aria-required="true"/>
                <label for="input_name">Name</label>
        </div>
</div>

会计圈
名称

正如在另一篇文章中提到的

我已经添加了required和aria required属性（同时使用required=“required”和required=”“值[我不知道为什么会提到这一点，就我所知，前者是正确的]）。然而，验证仍然没有做任何事情，除了电子邮件字段

我做错了什么

谢谢

PS

具体化HTML和Javascript的CDN如下所示：

<!--Import Google Icon Font-->
  <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-- Compiled and minified CSS -->
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>

---

jsiddle Link:

您可以使用以下代码覆盖

验证\u字段

函数

$（文档）.ready（函数（）{
window.validate_字段=函数（对象）{
var hasLength=object.attr（'data-length'）！==未定义；
var lenAttr=parseInt（object.attr（'data-length'）；
var len=object.val（）.length；
if（object.val（）.length==0&&object[0].validity.badInput==false&&！object.is（':required'））{
if（object.hasClass（'validate'））{
removeClass（'valid'）；
对象。removeClass（“无效”）；
}
}否则{
if（object.hasClass（'validate'））{
//检查字符计数器属性
if（（object.is（':valid'）&&hasLength&&（len）我也有同样的问题。它似乎根本不起作用。如果他们半年内都没有回答这个问题，那么支持就非常糟糕
$(document).ready(function() {
    window.validate_field = function(object) {
        var hasLength = object.attr('data-length') !== undefined;
        var lenAttr = parseInt(object.attr('data-length'));
        var len = object.val().length;
        if (object.val().length === 0 && object[0].validity.badInput === false && !object.is(':required')) {
            if (object.hasClass('validate')) {
                object.removeClass('valid');
                object.removeClass('invalid');
            }
        } else {
            if (object.hasClass('validate')) {
                // Check for character counter attributes
                if ((object.is(':valid') && hasLength && (len <= lenAttr)) || (object.is(':valid') && !hasLength)) {
                    object.removeClass('invalid');
                    object.addClass('valid');
                } else {
                    object.removeClass('valid');
                    object.addClass('invalid');
                }
            }
        }
    };
});