plug-in validazione jquery - cambia colore bordo + senza testo

Question

C'è comunque posso cambiare il colore del bordo in rosso su un errore piuttosto e sbarazzarmi del testo? Questo è praticamente l'unico errore che voglio mostrare e scomparirebbe una volta che l'input/textarea si focalizzasse.

<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

procedere come segue:

1) Impostare la funzione di callback per errorPlacementreturn false per sopprimere il testo del messaggio di errore.

2) Modificare il CSS per del plugin .error & .validclass 's per mostrare i bordi colorati, o qualsiasi altra cosa, di tutto l'elemento. Per impostazione predefinita, il plugin applica già automaticamente e rimuove questi due class, quindi non ci sono opzioni di plugin speciali da impostare per questo.

lavoro 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

Si potrebbe aggiungere una classe per il vostro input/textarea che aggiungerebbe un bordo rosso

ho chiamato .error

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

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

Poi utilizzare jQuery per andare a trovare l'ingresso/textareas con la classe '.error' e empty imposta il valore di esso su bianco.

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

Jsfiddle V1

Aggiornato

Esempio di JS

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

HTML

<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

No Jquery No Aggiungere altro/modificare qualsiasi funzionalità Just Add Css

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