एमडीएल + jQuery मान्य एकीकरण: एमडीएल-रेडियो__बटन सत्यापन के लिए कार्य-आसपास की आवश्यकता

Question

एमडीएल के साथ jQuery.validate का सामान्य उपयोग-मामला क्या प्रतीत होता है। this gist देखें।

यह ठीक काम करता है:

<h1>Without MDL</h1> 
<form id="foo"> 
    <input type="radio" name="bar" value="1" /> 1 
    <input type="radio" name="bar" value="2" /> 2 
<input type="submit" /> 
</form> 
<script> 
    $(function() { 
     $('#foo').validate({ 
      rules: { 
       "bar": { 
        required: true 
       }, 
      }, 
      errorPlacement: function(error, element) { 
       console.log(element); 
      } 
     }); 
    }); 
</script> 

यह करता कुछ भी नहीं:

<h1>With MDL</h1> 
<form id="zha"> 
    <label for="baz__1" class="mdl-radio mdl-js-radio"> 
     <input type="radio" name="baz" value="1" id="baz__1" class="mdl-radio__button" /> 1 
    </label> 
    <label for="baz__2" class="mdl-radio mdl-js-radio"> 
     <input type="radio" name="baz" value="2" id="baz__2" class="mdl-radio__button" /> 2 
    </label> 
    <input type="submit" id="butt"/> 
</form> 
<script> 
    $(function() { 
     $('#zha').validate({ 
      rules: { 
       "baz": { 
        required: true 
       }, 
      }, 
      errorPlacement: function(error, element) { 
       console.log(element); 
      } 
     }); 
    }); 
</script> 

अटैच किया जा रहा jQuery.validator.setDefaults({ debug: true }) कोई प्रभाव नहीं है - शून्य डिबग आउटपुट के रूप में - एमडीएल संस्करण में। mdl-js-radio या mdl-radio__button को हटाने से यह अपेक्षा के अनुसार काम करता है। मेरा अंतर्ज्ञान यह है कि एमडीएल इस तरह से डीओएम को अद्यतन कर रहा है जो jQuery की पहुंच को name= विशेषताओं से डिस्कनेक्ट करता है, लेकिन मुझे एमडीएल स्रोत कोड में समर्थन देने के लिए कोई सबूत नहीं मिल रहा है।

किसी को भी एकीकरण मिला है जो यहां काम करता है?

Answer 1

कुछ शोध के बाद, मुझे लगता है कि मुझे आपकी समस्या का समाधान मिला है। यह एक दिलचस्प है।
मेरे लिए, आपका कोड फ़ायरफ़ॉक्स पर काम करता है लेकिन क्रोम और सफारी पर नहीं। कारण बहुत आसान है। एमडीएल उन्हें छिपाने के लिए अपने इनपुट रेडियो बटन की सीएसएस डिफ़ॉल्ट शैली को हटा दें (प्रदर्शित नहीं: कोई नहीं, केवल ऊंचाई: 0, चौड़ाई: 0, अस्पष्टता ...)। क्रोम और सफारी मानते हैं कि "छुपा" हैं। JQuery.validate कोड ब्राउज़ करना, मुझे एहसास हुआ कि इनपुट रेडियो बटन कभी नहीं खोजे गए थे। (आपका कोड क्रोम और सफारी पर क्लासिक इनपुट के साथ काम करता है)। और क्यों ? क्योंकि अगर आप jQuery.validate की डिफ़ॉल्ट सेटिंग्स को देखते हैं तो आप देख सकते हैं कि वह छुपा इनपुट को अनदेखा करता है।

defaults: { 
    ... 
    ignore: ":hidden", 
    ... 
onfocusin: function(element, event) { 

और फिल्टर समारोह

elements: function() { 
    var validator = this, 
     rulesCache = {}; 

    // select all valid inputs inside the form (no submit or reset buttons) 
    return $(this.currentForm) 
    .find("input, select, textarea") 
    .not(":submit, :reset, :image, [disabled]") 
    .not(this.settings.ignore) // This line 
    .filter(function() { 
     if (!this.name && validator.settings.debug && window.console) { 
      console.error("%o has no name assigned", this); 
     } 

     // select only the first element for each name, and only those with rules specified 
     if (this.name in rulesCache || !validator.objectLength($(this).rules())) { 
      return false; 
     } 

     rulesCache[this.name] = true; 
     return true; 
    }); 
}, 

को रोकने के लिए यह सिर्फ कोड के इस टुकड़े जोड़ें:

jQuery.validator.setDefaults({ 
    ignore: "" 
}); 

यह मेरे लिए काम करता है। आशा है कि यह आप के लिए काम करता है।