jQuery डिफ़ॉल्ट सत्यापन त्रुटि संदेश डिस्प्ले ओवरराइड (सीएसएस) पॉपअप/टूलटिप

Question

मैं लेबल के बजाय div के साथ डिफ़ॉल्ट त्रुटि संदेश लेबल पर सवारी करने की कोशिश कर रहा हूं। मैंने this post पर भी देखा है और यह कैसे करना है, लेकिन सीएसएस के साथ मेरी सीमाएं मुझे परेशान कर रही हैं। मैं इन उदाहरणों में से कुछ की तरह इस प्रदर्शित कर सकते हैं कैसे:

Example #1 (Dojo) - त्रुटि प्रदर्शन को देखने के लिए
Example #2

यहाँ कुछ उदाहरण कोड है कि एक div तत्व

$(document).ready(function(){ 
      $("#myForm").validate({ 
       rules: { 
        "elem.1": { 
         required: true, 
         digits: true 
        }, 
        "elem.2": { 
         required: true 
        } 
       }, 
       errorElement: "div" 
      });     
     }); 

करने के लिए त्रुटि लेबल को ओवरराइड करता है अमान्य इनपुट टाइप करना होगा

अब मैं सीएसएस हिस्से पर एक नुकसान में हूँ, लेकिन यहाँ यह है:

div.error { 
     position:absolute; 
     margin-top:-21px; 
    margin-left:150px; 
    border:2px solid #C0C097; 
     background-color:#fff; 
     color:white; 
     padding:3px; 
     text-align:left; 
     z-index:1; 
     color:#333333; 
    font:100% arial,helvetica,clean,sans-serif; 
    font-size:15px; 
    font-weight:bold; 
    } 

अपडेट:

ठीक है, मैं अब इस कोड का उपयोग कर रहा हूं लेकिन पॉपअप पर छवि और प्लेसमेंट सीमा से बड़ा है, क्या इसे गतिशील होने के लिए समायोजित किया जा सकता है?

if (element.attr('type') == 'radio' || element.attr('type') == 'checkbox') { 
    element = element.parent(); 

    offset = element.offset(); 
    error.insertBefore(element) 
    error.addClass('message'); // add a class to the wrapper 
    error.css('position', 'absolute'); 
    error.css('left', offset.left + element.outerWidth()); 
    error.css('top', offset.top - (element.height()/2)); // Not working for Radio, displays towards the bottom of the element. also need to test with checkbox 
} else { 
    // Error placement for single elements 
    offset = element.offset(); 
    error.insertBefore(element) 
    error.addClass('message'); // add a class to the wrapper 
    error.css('position', 'absolute'); 
    error.css('left', offset.left + element.outerWidth()); 
    error.css('top', offset.top - (element.height()/2)); 
} 

सीएसएस (अपने सीएसएस कोड) नीचे के रूप में एक ही है

एचटीएमएल

<span> 
<input type="radio" class="checkbox" value="P" id="radio_P" name="radio_group_name"/> 
<label for="radio_P">P</label> 
<input type="radio" class="checkbox" value="S" id="radio_S" name="radio_group_name"/> 
<label for="radio_S">S</label> 
</span> 

Answer 1

आप छोटे सीएसएस के साथ त्रुटि संदेश प्रदर्शन को ओवरराइड करने के लिए errorPlacement विकल्प का उपयोग कर सकते हैं। क्योंकि सीएसएस स्वयं के प्रभाव को उत्पन्न करने के लिए पर्याप्त नहीं होगा।

$(document).ready(function(){ 
    $("#myForm").validate({ 
     rules: { 
      "elem.1": { 
       required: true, 
       digits: true 
      }, 
      "elem.2": { 
       required: true 
      } 
     }, 
     errorElement: "div", 
     wrapper: "div", // a wrapper around the error message 
     errorPlacement: function(error, element) { 
      offset = element.offset(); 
      error.insertBefore(element) 
      error.addClass('message'); // add a class to the wrapper 
      error.css('position', 'absolute'); 
      error.css('left', offset.left + element.outerWidth()); 
      error.css('top', offset.top); 
     } 

    }); 
}); 

आप छोड़ दिया और शीर्ष सीएसएस के साथ खेल सकते शीर्ष पर त्रुटि संदेश को दिखाने के लिए जिम्मेदार बताते हैं, छोड़ दिया, सही है या तत्व के नीचे। उदाहरण के लिए ऊपर त्रुटि को दिखाने के लिए:

errorPlacement: function(error, element) { 
     element.before(error); 
     offset = element.offset(); 
     error.css('left', offset.left); 
     error.css('top', offset.top - element.outerHeight()); 
    } 

और इतने पर। आप अधिक विकल्पों के लिए jQuery documentation about css देख सकते हैं।

यहां इस्तेमाल किया गया सीएसएस है। परिणाम बिल्कुल वही दिखता है जैसा आप चाहते हैं। यथासंभव कम सीएसएस के साथ:

div.message{ 
    background: transparent url(msg_arrow.gif) no-repeat scroll left center; 
    padding-left: 7px; 
} 

div.error{ 
    background-color:#F3E6E6; 
    border-color: #924949; 
    border-style: solid solid solid none; 
    border-width: 2px; 
    padding: 5px; 
} 

और यहाँ पृष्ठभूमि छवि आप की जरूरत है:

alt text http://sandbox.scriptiny.com/messages/images/msg_arrow.gif

यदि आप चाहते हैं त्रुटि संदेश विकल्प या क्षेत्रों के एक समूह के बाद प्रदर्शित किया जाएगा।फिर उन सभी तत्वों को एक कंटेनर में 'div' या 'fieldet' के अंदर समूहित करें। उदाहरण के लिए उन सभी 'समूह' में एक विशेष कक्षा जोड़ें। और errorPlacement समारोह की शुरुआत करने के लिए निम्नलिखित जोड़ें:

errorPlacement: function(error, element) { 
    if (element.hasClass('group')){ 
     element = element.parent(); 
    } 
    ...// continue as previously explained 

आप केवल विशिष्ट मामलों को संभालने के लिए चाहते हैं तो आप attr बजाय का उपयोग कर सकते हैं:

if (element.attr('type') == 'radio'){ 
    element = element.parent(); 
} 

कि पर्याप्त होना चाहिए त्रुटि संदेश होने के लिए मूल तत्व के बगल में प्रदर्शित किया गया।

आपको मूल तत्व की चौड़ाई 100% से कम होने की आवश्यकता हो सकती है।

---

मैंने आपके कोड की कोशिश की है और यह मेरे लिए बिल्कुल ठीक काम कर रहा है।

मैं सिर्फ यह लाइन में फिट बनाने के लिए संदेश गद्दी के लिए एक बहुत छोटे से समायोजन कर दिया:: यहाँ एक पूर्वावलोकन है

div.error { 
    padding: 2px 5px; 
} 

आप उन संख्याओं को बढ़ाने के लिए बदल सकते हैं/शीर्ष पर गद्दी कमी/नीचे या बाएं/दाएं। आप त्रुटि संदेश में ऊंचाई और चौड़ाई भी जोड़ सकते हैं। अभी भी समस्या आ रहे हैं, तो

div.group { 
    width: 50px; /* or any other value */ 
} 

रिक्त पृष्ठ के बारे में एक div

<div class="group"> 
<input type="radio" class="checkbox" value="P" id="radio_P" name="radio_group_name"/> 
<label for="radio_P">P</label> 
<input type="radio" class="checkbox" value="S" id="radio_S" name="radio_group_name"/> 
<label for="radio_S">S</label> 
</div> 

साथ काल की जगह और फिर कंटेनर चौड़ाई देने की कोशिश (यह बहुत महत्वपूर्ण है)। जैसा कि मैंने कहा मैंने आपके कोड की कोशिश की और यह मेरे लिए काम कर रहा है। यह आपके कोड में कुछ और हो सकता है जो समस्या पैदा कर रहा है।

Answer 2

आप के लिए तुम क्यों एक div के साथ लेबल प्रतिस्थापित करने की आवश्यकता के रूप में किसी कारण प्रदान कर सकता है, तो कि निश्चित रूप से मदद मिलेगी ...

इसके अलावा, आप एक नमूना है कि उपयोगी होगा (http://dpaste.com/ या http://pastebin.com/) पेस्ट कर सकता है

+०१२३५१६४१०

Answer 3

मैं उस छोटे बबल प्रभाव को प्राप्त करने के लिए jQuery BeautyTips का उपयोग करता हूं जिसके बारे में आप बात कर रहे हैं। मैं प्रमाणीकरण प्लगइन का उपयोग नहीं करता इसलिए मैं वास्तव में वहां बहुत मदद नहीं कर सकता, लेकिन स्टाइल करना और ब्यूटीटिप्स दिखाने में बहुत आसान है। आपको इसमें देखना चाहिए। यह केवल सीएसएस नियमों के समान आसान नहीं है, मुझे डर है, क्योंकि आपको कैनवास तत्व का उपयोग करने की आवश्यकता है और इसके साथ अच्छा खेलने के लिए आईई के लिए एक अतिरिक्त जावास्क्रिप्ट फ़ाइल शामिल है।

Answer 4

कुछ बातें:

पहले, मैं तुम सच में एक रेडियो fieldset के लिए एक प्रमाणीकरण त्रुटि की जरूरत है, क्योंकि आप बस डिफ़ॉल्ट रूप से चेक क्षेत्रों में से एक हो सकता है नहीं लगता है। ज्यादातर लोग कुछ सही करने के बजाय कुछ सही करेंगे। उदाहरण के लिए:

Age: (*) 12 - 18 |() 19 - 30 | 31 - 50 

सही उत्तर में बदलने की संभावना अधिक है क्योंकि व्यक्ति डिफ़ॉल्ट रूप से जाना नहीं चाहता है। अगर वे इसे खाली देखते हैं, तो उन्हें "आपके किसी भी व्यवसाय" को सोचने की संभावना नहीं है और इसे छोड़ दें।

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

<style type="text/css"> 
    .error { 
     width: 13em; /* Ensures that the div won't exceed right padding of form */ 
     margin-top: -1.5em; /*Moves the div up to the same level as input */ 
     margin-left: 11em; /*Moves div to the right */ 
     font-size: .9em;  /*Makes sure that the error div is smaller than input */ 
    } 

    <form> 
    <label for="name">Name:</label><input id="name" type="textbox" /> 
    <div class="error"><<< This field is required!</div> 
    <label for="numb">Phone:</label><input id="numb" type="textbox" /> 
    <div class="error"><<< This field is required!</div> 
    </form> 

Answer 5

दुर्भाग्य से मैं अपने नौसिखिया प्रतिष्ठा के साथ टिप्पणी नहीं कर सकता, लेकिन मैं जारी करने के लिए एक समाधान है स्क्रीन खाली हो रही है, या कम से कम यह मेरे लिए काम किया है। त्रुटि प्लेसमेंट फ़ंक्शन के अंदर रैपर क्लास को सेट करने के बजाय, जब आप रैपर प्रकार सेट कर रहे हों तो इसे तुरंत सेट करें।

$('#myForm').validate({ 
    errorElement: "div", 
    wrapper: "div class=\"message\"", 
    errorPlacement: function(error, element) { 
     offset = element.offset(); 
     error.insertBefore(element); 
     //error.addClass('message'); // add a class to the wrapper 
     error.css('position', 'absolute'); 
     error.css('left', offset.left + element.outerWidth() + 5); 
     error.css('top', offset.top - 3); 
    } 

});

मुझे लगता है कि ऐसा करने के लिए यह सत्यापित करने की अनुमति है कि सत्यापनकर्ता यह जानने के लिए अनुमति दे कि कौन से div तत्वों को निकालना है, उन सभी के बजाय। मेरे लिए काम किया लेकिन मुझे पूरा यकीन नहीं है कि क्यों, इसलिए अगर कोई विस्तार कर सकता है जो दूसरों को एक टन में मदद कर सकता है।

Answer 6

है कि इसका जवाब वास्तव में मुझे मदद की, मेरे मामले में मैं अपने .validate विधि के लिए कुछ तत्वों को फ़िल्टर और उनके त्रुटि div पर विशेष aligment है,

errorPlacement:function(error,element) { 
    if (element.attr("id") == "special_element") { 
     // special align 
    } else { // default error scheme 
     error.insertAfter(element); 
    } 
} 

Answer 7

जोड़ें निम्नलिखित सीएसएस सीएसएस या कार्यक्षमता बदलना पड़ा

errorElement: "div", 
    wrapper: "div", 
    errorPlacement: function(error, element) { 
     offset = element.offset(); 
     error.insertAfter(element) 
     error.css('color','red'); 
    }