jquery सत्यापन प्लगइन- सीमा रंग बदलें + कोई पाठ

Question

क्या वैसे भी मैं एक त्रुटि पर लाल रंग को लाल रंग में बदल सकता हूं और पाठ से छुटकारा पा सकता हूं? यह एकमात्र त्रुटि है जिसे मैं प्रदर्शित करना चाहता हूं, और इनपुट/टेक्स्टरेरा केंद्रित होने के बाद यह गायब हो जाएगा।

<div id="contact-form"> 
      <form method="get" id="contacts"> 
       <div class="contact-controls"> 
        <label class="contact-label" for="name-input">NAME</label> 
        <div class="input-wrapper"> 
         <input type="text" name="contact-name" id="name-input" placeholder="Your Name" required> 
        </div> 
       </div> 
       <div class="contact-controls"> 
        <label class="contact-label" for="email-input">EMAIL</label> 
        <div class="input-wrapper"> 
         <input type="text" name="contact-email" id="email-input" placeholder="Your Email" required> 
        </div> 
       </div> 
       <div class="contact-controls"> 
        <label class="contact-label" for="message-input">MESSAGE</label> 
        <div class="input-wrapper"> 
         <textarea name="contact-message" id="message-input" rows="15" placeholder="Hi there&#33;" required></textarea> 
        </div> 
       </div> 
       <div class="contact-controls"> 
        <input type="hidden" name="save" value="contact"> 
        <button type="submit" class="contact-button">Send</button> 
       </div> 
      </form> 
     </div> 

Answer 1

निम्न कार्य करें:

1) त्रुटि संदेश पाठ को दबाने के लिए return false को errorPlacement कॉलबैक फ़ंक्शन सेट करें।

2) रंग का बॉर्डर, या जो कुछ भी, तत्व के चारों ओर दिखाने के लिए प्लगइन का .error & .validclass के लिए सीएसएस संशोधित करें। डिफ़ॉल्ट रूप से, प्लगइन पहले से ही स्वचालित रूप से लागू होता है और इन दो class के हटा देता है, इसलिए इसके लिए सेट करने के लिए कोई विशेष प्लगइन विकल्प नहीं है।

कार्य डेमो: http://jsfiddle.net/8vQFd/

jQuery:

$(document).ready(function() { 

    $('#myform').validate({ // initialize the plugin 
     // your rules and options, 
     errorPlacement: function(){ 
      return false; // suppresses error message text 
     } 
    }); 

}); 

Answer 2

आप अपने इनपुट/textareas करने के लिए एक वर्ग जोड़ सकता है कि एक लाल बॉर्डर

जोड़ना होगा मैं यह कहा जाता .त्रुटि

input:focus,textarea:focus{ 
outline: none !important; 
} 

input.error, textarea.error{ 
outline:red groove thin; 
} 

तब जाकर इनपुट को खोजने के लिए jQuery का उपयोग वर्ग 'आतंक' के साथ/textareas और खाली इसके मूल्य को रिक्त स्थान पर सेट करें।

$(document).ready(function() { 
    $('#contact-form').find('.error').val(' '); 
}); 

Jsfiddle V1

अपडेट किया गया जे एस

की

उदाहरण

$(document).ready(function() { 
    $('#contact-form').find('.error').val(' '); 
    $('input, textarea').click(function() { 
    $(this).removeClass('error').val(''); 
    }); 

    var name = $('#name-input').val(); 

    if(name == ''){ 
     $('#name-input').addClass('error'); 
    } 
    }); 

सीएसएस

input:focus,textarea:focus{ 
    border-color: initial; 
} 

input.error, textarea.error{ 
    border:1px solid red; 
} 

एचटीएमएल

<div id="contact-form"> 
     <form method="get" id="contacts"> 
      <div class="contact-controls"> 
       <label class="contact-label" for="name-input">NAME</label> 
       <div class="input-wrapper"> 
        <input type="text" name="contact-name" id="name-input" placeholder="Your Name" value="" class="" required> 
       </div> 
      </div> 
      <div class="contact-controls"> 
       <label class="contact-label" for="email-input">EMAIL</label> 
       <div class="input-wrapper"> 
        <input type="email" name="contact-email" id="email-input" placeholder="Your Email" value="" class="" required> 
       </div> 
      </div> 
      <div class="contact-controls"> 
       <label class="contact-label" for="message-input">MESSAGE</label> 
       <div class="input-wrapper"> 
        <textarea name="contact-message" id="message-input" rows="15" placeholder="Hi there&#33;" class="" required></textarea> 
       </div> 
      </div> 
      <div class="contact-controls"> 
       <input type="hidden" name="save" value="contact"> 
       <button type="submit" class="contact-button">Send</button> 
      </div> 
     </form> 
    </div> 

JSfiddle V2

Answer 3

कोई jQuery कोई अन्य जोड़ें/किसी भी कार्यक्षमता को संशोधित बस जोड़े Css

input[class="error"]{border:1px solid #f00 !important;} input[class="form control error"]{border:1px solid #f00 !important;} .error p{color:#f00 !important;}