jquery validation plugin-change kenarlık rengi + yazı yok

Question

Yine de kenarlık rengini bir hata üzerinde kırmızıya çevirebilirim ve metinden kurtulabilir miyim? Bu, görüntülemek istediğim tek hatadır, ve giriş/textarea odaklandıktan sonra ortadan kalkacaktır.

<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

Aşağıdakileri yapın 210 HTML:

1) hata iletisi metni bastırmak için return false için errorPlacement geri arama işlevini ayarlayın.

2) eleman etrafında renkli kenarlıklar, ya da her neyse, göstermek için eklentinin .error & .validclass 's için CSS değiştirin. Varsayılan olarak, eklenti zaten bu iki class'ları uygular ve kaldırır, bu nedenle bunun için özel bir eklenti seçeneği yoktur.

Çalışma DEMO: 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

Kırmızı renkte sınır

eklersiniz senin girdi/textareas için bir sınıf ekleyebilir Ben

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

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

Sonra gidip girişini bulmak için jquery kullanmak .error denir '.error' sınıfıyla/textareas ve boş değerini boş olarak ayarlayın. JS

ait

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

Jsfiddle V1

Güncelleme

Örnek

$(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'); 
    } 
    }); 

CSS

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

Hayır jQuery başka hiçbir ekleme/Herhangi İşlevsellik değiştirin Hemen ekle Css

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