Howto RequiredFieldValidator माता पिता div

Question

मैं किसी पाठ बॉक्स इनपुट तत्व के रूप में एक RequiredFieldValidator है कि राशि के सीएसएस वर्ग बदलने:

<div> 
    <label>First name</label> 
    <asp:RequiredFieldValidator ID="RequiredFieldValidatorFirstname" runat="server" ErrorMessage="Required" ControlToValidate="TextBoxFirstname"></asp:RequiredFieldValidator> 
    <asp:TextBox ID="TextBoxFirstname" runat="server"></asp:TextBox> 
</div> 

जब पाठ बॉक्स प्रस्तुत मैं क्लास 'जोड़ना चाहते हैं पर खाली है फार्म त्रुटि 'माता-पिता को:

<div class="form-error"> 
    <label>First name</label> 
    <asp:RequiredFieldValidator ID="RequiredFieldValidatorFirstname" runat="server" ErrorMessage="Required" ControlToValidate="TextBoxFirstname"></asp:RequiredFieldValidator> 
    <asp:TextBox ID="TextBoxFirstname" runat="server"></asp:TextBox> 
</div> 

क्या यह संभव है, और यदि ऐसा है - तो मैं इसे कैसे कर सकता हूं?

Answer 1

आवश्यक फ़ील्ड वैलिडेटर के साथ आप अपना कस्टम कोड नहीं जोड़ सकते हैं।

आपको एएसपीनेट customvalidator control का उपयोग करना चाहिए, और अपनी खुद की कस्टम सत्यापन जावास्क्रिप्ट फ़ंक्शन लिखना जो कक्षा को div को सेट करता है।

Answer 2

मुझे लगता है कि आपको नीचे दिया गया विकल्प उपयोगी हो सकता है। असल में यह एएसपी.NET सत्यापन डिफ़ॉल्ट स्क्रिप्ट्स में से एक को ओवरराइड करता है। और पैरेंट div पर त्रुटि वर्ग जोड़ने/निकालने के लिए इसमें कुछ तर्क डालता है।

डीओएम पुनः लोड नहीं होने के बाद सत्यापन को ट्रिगर होने के बाद मुझे इस समस्या का सामना करना पड़ा था। सत्यापन सत्यापन को अद्यतन करते समय मूल सत्यापन स्क्रिप्ट को ओवरराइड करके आपके पास अपनी स्क्रिप्ट चलाने की क्षमता होती है।

इस तरह आप अपने अन्य सत्यापन नियंत्रणों का उपयोग जारी रख सकते हैं। आपको स्क्रिप्ट को अपने पेज या मास्टरपेज के नीचे रखना होगा। मैंने चीजों को आसान बनाने के लिए JQuery का भी उपयोग किया।

* नोट नीचे दिए गए कोड को आपके वैधकर्ताओं को गतिशील प्रदर्शित करने के लिए सेट करने की आवश्यकता है। यदि आप उन्हें दिखाना नहीं चाहते हैं तो आप उन्हें एक सीएसएस क्लास जोड़ सकते हैं और डिस्प्ले सेट कर सकते हैं: none।

<script> 

    $(function(){ 
     if (typeof ValidatorUpdateDisplay != 'undefined') { 
      var originalValidatorUpdateDisplay = ValidatorUpdateDisplay; 

      ValidatorUpdateDisplay = function (val) { 
       if (!val.isvalid) { 
        $("#" + val.controltovalidate).closest("div").addClass("form-error"); 
       } 

       originalValidatorUpdateDisplay(val); 
      } 
     } 
    }); 

</script> 

इस कोड को मूल ValidatorUpdateDisplay समारोह, अपने सत्यापनकर्ता के प्रदर्शन को अद्यतन करने controltovalidate निकटतम div को अद्यतन करने के लिए जिम्मेदार सजाया गया:

<script type="text/javascript"> 
    function ValidatorUpdateDisplay(val) { 
     if (typeof (val.display) == "string") { 
      if (val.display == "None") { 
       return; 
      } 
      if (val.display == "Dynamic") { 
       val.style.display = val.isvalid ? "none" : "inline"; 
       return; 
      } 
     } 
     if ((navigator.userAgent.indexOf("Mac") > -1) && (navigator.userAgent.indexOf("MSIE") > -1)) { 
      val.style.display = "inline"; 
     } 
     val.style.visibility = val.isvalid ? "hidden" : "visible"; 


     //--- Add/Remove Error Class 
     var triggeredSiblings = 0; 
     if (val.isvalid) { 
      $(val).siblings('span').each(function() { 
       if ($(this).isvalid == false) { triggeredSiblings = 1; } 
      }); 
      if (triggeredSiblings == 0) { $(val).closest("div").removeClass("error"); } 
     } else { 
      $(val).closest("div").addClass("error"); 
     } 
    } 
</script> 

Answer 3

निम्नलिखित का प्रयोग करें।