Wtyczka walidacji jquery - zmiana koloru obramowania + brak tekstu

Question

Czy mimo to mogę zmienić kolor ramki na czerwony na błąd i pozbyć się tekstu? Jest to prawie jedyny błąd, który chcę wyświetlić, i zniknie, gdy tylko wejście/tekst zostanie skupione.

<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

Wykonaj następujące czynności:

1) Ustawić funkcję errorPlacement oddzwonienia do return false stłumić tekst komunikatu o błędzie.

2) Modyfikacja CSS dla wtyczki za .error & .validclass „s pokazać kolorowe granice, czy cokolwiek, wokół elementu. Domyślnie wtyczka jest już automatycznie stosowana i usuwa te dwa class, więc nie ma specjalnych opcji wtyczki, aby to ustawić.

roboczy 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

Można dodać klasę do wejścia/pola tekstowe, które dodać czerwoną ramkę

nazwałem go .error

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

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

Następnie za pomocą jQuery iść i znaleźć wejście/textareas z klasą ".error" i pustą ustaw wartość na pustą.

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

Jsfiddle V1

Updated

Przykład 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

Nie Jquery nr dodać inne/modyfikować żadnych funkcji 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;}