jQuery सत्यापन प्लगइन - इसके बजाय कोई पृष्ठभूमि संदेश कस्टम पृष्ठभूमि

Question

मैं jQuery सत्यापन प्लगइन (http://docs.jquery.com/Plugins/validation) का उपयोग कर रहा हूं। जिस फॉर्म को सत्यापित किया जा रहा है, उसके पास पाठ इनपुट फ़ील्ड के लिए कस्टम पृष्ठभूमि छवियां हैं, इसलिए अमान्य फ़ील्ड के लिए त्रुटि संदेश दिखाने की बजाय मैं पृष्ठभूमि छवि को बदलना चाहता हूं। चीजों को थोड़ा सा बनाना यह है कि फ़ील्ड के लिए पृष्ठभूमि छवि अलग-अलग div पर टेक्स्ट फ़ील्ड के पीछे स्थित है (जिसमें पारदर्शी पृष्ठभूमि और कोई सीमा नहीं है)। मैं यहां इस डिजाइन निर्णय के कारणों में जा रहा हूं (यह टेक्स्ट फ़ील्ड के भीतर मार्जिन से संबंधित है) लेकिन मैंने सोचा कि इसका उल्लेख किया जाना चाहिए क्योंकि यह इस प्रश्न के लिए महत्वपूर्ण है।

इसलिए, मैं दो प्रश्न हैं:

1. मैं त्रुटि संदेशों में से प्रदर्शन सभी एक साथ कैसे रोक सकते हैं?

2. मैं कैसे बजाय सत्यापन प्लगइन बता सकते हैं, उदाहरण के लिए, नाम क्षेत्र (जैसे <input id=name ... />) अमान्य है तो यह प्रासंगिक div (जैसे <div id=name-bg... ></div>) के लिए पृष्ठभूमि बदलना चाहिए?

किसी भी सहायता के लिए धन्यवाद!

Answer 1

मैं त्रुटि संदेशों के प्रदर्शन को कैसे रोक सकता हूं?

जिन्हें आप सत्यापित प्लगइन का showErrors विकल्प का उपयोग करके ऐसा कर सकते हैं:

$("#commentForm").validate({ 
    showErrors: function(errorMap, errorList) { 
      /* Custom error-handling code here */ 
     } 
    } 
}); 

errorList तर्क वस्तुओं की एक सूची है, जिनमें से प्रत्येक एक element संपत्ति त्रुटि के साथ डोम तत्व है कि युक्त।

मैं कैसे बजाय सत्यापन प्लगइन बता सकते हैं, उदाहरण के लिए, नाम क्षेत्र तो अमान्य यह प्रासंगिक div के लिए पृष्ठभूमि बदलना चाहिए है?

showErrors विकल्प और errorList तर्क ऊपर विस्तृत का उपयोग करना, आप इस तरह यह पूरा कर सकते हैं:

$("#commentForm").validate({ 
    showErrors: function(errorMap, errorList) { 
     var i, length = errorList.length; 
     var el; 

     for (i = 0; i < length; i++) { 
      el = errorList[i].element; 
      /* Build up a selector based on the element containing and error's id:*/ 
      $("#" + el.id + "-bg").show() // <-- write code against this selector 
     } 
    } 
}); 

यहाँ एक सबूत अवधारणा-का-: http://jsfiddle.net/vD5cQ/

आशा है कि मदद करता है!