jQuery सत्यापन प्लगइन: ऑनफोकसआउट, कीप पर त्रुटि प्लेसमेंट फ़ंक्शन को आमंत्रित करें और

Question

पर क्लिक करें मैं jquery सत्यापन प्लगइन का उपयोग कर रहा हूं और फ़ील्ड शीर्षक विशेषता में त्रुटि संदेश जोड़ने और फ़ील्ड के बगल में केवल ✘ प्रदर्शित करने के लिए त्रुटि प्लेसमेंट फ़ंक्शन का उपयोग करना चाहता हूं।

यह महान काम करता है जब प्रपत्र सबमिट बटन के साथ प्रस्तुत किया जाता है, लेकिन जब निम्नलिखित घटनाओं के किसी भी ट्रिगर कर रहे हैं: - onfocusout - क्लिक करें - onkeyup

सत्यापन जांच में चलाए जा रहे हैं, लेकिन यह errorPlacement समारोह को छोड़ देता है और डिफ़ॉल्ट व्यवहार की तरह फ़ील्ड के बाद पूर्ण त्रुटि संदेश जोड़ता है।

मैं निम्नलिखित कोड का उपयोग कर रहा:

$("#send-mail").validate({ 
    debug: true, 
    // set this class to error-labels to indicate valid fields 
    success: function(label) { 
     // set text as tick 
     label.html("✔").addClass("valid"); 
    }, 
    // the errorPlacement has to take the table layout into account 
    errorPlacement: function(error, element) { 
     console.log("errorPlacement called for "+element.attr("name")+" field"); 
     // check for blank/success error 
     if(error.text() == "") 
     { 
      // remove field title/error message from element 
      element.attr("title", ""); 
      console.log("error check passed"); 
     } 
     else 
     { 
      // get error message 
      var message = error.text(); 

      // set as element title 
      element.attr("title", message); 

      // clear error html and add cross glyph 
      error.html("✘"); 

      console.log("error check failed: "+message); 
     } 
     // add error label after form element 
     error.insertAfter(element); 
    }, 
    ignoreTitle: true, 
    errorClass: "invalid" 
}); 

Answer 1

आपका समस्या यह है कि प्लगइन केवल प्रत्येक तत्व जो मान्य है के लिए एक बार errorPlacement फ़ंक्शन को कॉल है। अर्थात् जब तत्व के लिए त्रुटि लेबल पहली बार बनाया गया है। इसके बाद प्लगइन सिर्फ पहले से मौजूद लेबल का पुन: उपयोग करता है और केवल HTML को प्रतिस्थापित करता है (या तत्व अब मान्य होने पर त्रुटि लेबल छुपाता है)। यही कारण है कि आपका क्रॉस हटा दिया जाता है और वास्तविक त्रुटि संदेश दिखाया जाता है।

बस यह सुनिश्चित करने के लिए कि प्लगइन का प्रवाह स्पष्ट है।

1. तत्व (अभी तक कोई errorlabel)
2. तत्व कुछ बिंदु
3. प्लगइन त्रुटि लेबल बनाता है और errorPlacement समारोह
4. तत्व "पार" (शीर्षक में त्रुटि संदेश)
5. तत्व हो जाता है कॉल पर मान्य हो जाता है फोकस करें और आप कुछ बदलते हैं
6. प्लगइन पुनरीक्षित तत्व
7. लगता है कि त्रुटि लेबल पहले से ही बनाया गया था (और रखा गया)
8. प्लगइन बस label.html(message) बजाय पुराने लेबल को दूर करने और यह

readding की कॉल तो आप देख आपकी समस्या अनुकूलन का एक प्रकार प्लगइन त्रुटि लेबल की कुछ अनावश्यक आवेषण/हटा बचाने के लिए करता है। जो भी समझ में आता है।

आप देख सकते हैं कि मैं क्या showLabel लाइनों प्रासंगिक टुकड़े के लिए 617-625 समारोह में मान्यता-प्लगइन-sourcecode

jquery.validate.js v1.6 जांच को देखकर कहा।

---

सम्भावित समाधान होना अतिरिक्त एक कस्टम showErrors कॉलबैक जो जानवर बल के साथ समस्या का हल प्रदान करने के लिए कर सकता है।

$("#send-mail").validate({ 
... 
    showErrors: function(errorMap, errorList) { 
     for (var i = 0; errorList[i]; i++) { 
      var element = this.errorList[i].element; 
      //solves the problem with brute force 
      //remove existing error label and thus force plugin to recreate it 
      //recreation == call to errorplacement function 
      this.errorsFor(element).remove(); 
     } 
     this.defaultShowErrors(); 
    } 
... 
}); 

की तर्ज पर

कुछ हो सकता है कि वहाँ इस के लिए एक क्लीनर समाधान है, लेकिन यह यह करने के लिए और आप एक बेहतर समाधान की जांच के लिए समय देना चाहिए।

Answer 2

धन्यवाद घबराना,

मैं कुछ चारों ओर से खुदाई किया है और एक ही समस्या पाया।

मैं jquery.validation.js में showLabel फ़ंक्शन "हैकिंग" द्वारा काम करने में कामयाब रहा। यह सुंदर नहीं है लेकिन काम करता है।

शो ओवरराइड फ़ंक्शन विकल्प मुझे प्लगइन कोड बदलने से रोक देगा, इसलिए मैं एक नज़र डालेगा।

यहाँ कोड मैं showLabel विधि के लिए इस्तेमाल किया है:

 showLabel: function(element, message) { 

      // look for existing error message 
      var label = this.errorsFor(element); 
      // existing error exist? 
      if (label.length) { 
       // refresh error/success class 
       label.removeClass().addClass(this.settings.errorClass); 

       // check if we have a generated label, replace the message then 
       label.attr("generated"); 

       // is message empty? 
       if(!message) 
       { 
        // add tick glyph 
        label.html("✔"); 

        // wipe element title 
        $(element).attr('title', message) 
       } 
       else 
       { 
        // clear error html and add cross glyph 
        label.html("✘"); 

        // update element title 
        $(element).attr('title', message) 
       } 

       // && label.html(message); 
      } 
      else { 
       // create label 
       label = $("<" + this.settings.errorElement + "/>") 
        .attr({"for": this.idOrName(element), generated: true}) 
        .addClass(this.settings.errorClass) 
        .html(message || ""); 
       if (this.settings.wrapper) { 
        // make sure the element is visible, even in IE 
        // actually showing the wrapped element is handled elsewhere 
        label = label.hide().show().wrap("<" + this.settings.wrapper + "/>").parent(); 
       } 
       if (!this.labelContainer.append(label).length) 
        this.settings.errorPlacement 
         ? this.settings.errorPlacement(label, $(element)) 
         : label.insertAfter(element); 
      } 
      if (!message && this.settings.success) { 
       label.text(""); 
       typeof this.settings.success == "string" 
        ? label.addClass(this.settings.success) 
        : this.settings.success(label); 
      } 
      this.toShow = this.toShow.add(label); 
     }