jquery validation plugin- ändern border color + no text

Question

Gibt es trotzdem ich kann die border-color auf rot bei einem fehler eher ändern und den text loswerden? Das ist so ziemlich der einzige Fehler, den ich anzeigen möchte, und er verschwindet, sobald die Eingabe/Textfläche fokussiert wird.

<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

Gehen Sie wie folgt:

1) Stellen Sie die errorPlacement Callback-Funktion return false die Fehlermeldung Text zu unterdrücken.

2) Ändern Sie die CSS für die .error Plugin & .validclass ‚s farbige Grenzen zu zeigen, oder was auch immer, um das Element. Standardmäßig wendet das Plugin diese beiden class automatisch an und entfernt sie, so dass keine speziellen Plugin-Optionen dafür festgelegt werden müssen.

Arbeits 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

Sie könnten eine Klasse zu Ihrer Eingabe/Textfelder hinzufügen, die einen roten Rahmen

hinzufügen würde ich es genannt .Error

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

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

Dann jquery verwenden, um die Eingabe zu gehen und finden/textareas mit der Klasse '.error' und leer setze den Wert auf leer.

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

Jsfiddle V1

Aktualisiert

Beispiel von 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

Nein JQuery Kein anderes Hinzufügen/Ändern In jede Funktionalität Gerade Css

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