फ्रेमवर्क को मटेरियल करें - आवश्यक फ़ील्ड का सत्यापन

Question

काम नहीं कर रहा है मैं भौतिक सीएसएस ढांचे का उपयोग कर रहा हूं और फॉर्म सत्यापन काम नहीं कर रहा है।

ईमेल सत्यापन ठीक काम करता है:

<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

मैंने जोड़ा है आवश्यक और एरिया-आवश्यक विशेषता (दोनों आवश्यक = "आवश्यक" और आवश्यक = "" मानों के साथ [मुझे यकीन नहीं है कि इसका उल्लेख क्यों किया गया था, जहां तक ​​मुझे पता है कि पूर्व सही है])। हालांकि सत्यापन अभी भी ईमेल फ़ील्ड के अलावा कुछ भी नहीं कर रहा है ...

मैं क्या गलत कर रहा हूं?

धन्यवाद

पुनश्च

अमल में लाना 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> 

JSFiddle लिंक: https://jsfiddle.net/rz0zk5u6/99/

Answer 1

आप अधिलेखित कर सकते हैं या तो निम्न कोड के साथ 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'); 
       } 
      } 
     } 
    }; 
}); 

या जब तक प्रतीक्षा करें निम्नलिखित पीआर विलय कर दिया है। https://github.com/Dogfalo/materialize/pull/4883