實現框架 - 驗證所需的字段不工作

我正在使用Materialise CSS框架並且表單驗證不起作用。實現框架 - 驗證所需的字段不工作

的電子郵件驗證工作正常：

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

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

materialize best practice validate empty field

我已經添加了需要和詠歎調要求的屬性（既要求=「需要」和要求=「」值[我不知道爲什麼提到這一點，據我所知前者是正確的]）。然而，驗證仍然沒有做任何事情，除了電子郵件字段...

我做錯了什麼？

感謝

CDN的Materialise的HTML和Javascript在這裏：

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

的jsfiddle鏈接：https://jsfiddle.net/rz0zk5u6/99/

來源

2016-07-29 MC123

我有同樣的問題。它似乎根本不起作用。如果他們在半年內甚至沒有回答這個問題，他們的支持情況就非常糟糕 – Edward

您可以覆蓋validate_field功能用下面的代碼

https://codepen.io/anon/pen/QgqLxE

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

或者等到下PR合併。 https://github.com/Dogfalo/materialize/pull/4883

來源

2017-06-24 17:57:02

實現框架 - 驗證所需的字段不工作

回答

相關問題