плагин проверки jQuery - изменение цвета границы + текст

есть ли в любом случае я могу изменить цвет границы на красный при ошибке и избавиться от текста? Это в значительной степени единственная ошибка, которую я хочу отобразить, и она исчезнет, как только ввод/textarea станет сфокусированным.

<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!" 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>
7
jquery jquery-validate

4 ответов

сделать следующее:

1) установить errorPlacement функция обратного вызова return false для подавления текста сообщения об ошибке.

2) Измените CSS для плагина .error & .valid class, чтобы показать цветные границы или что-то еще вокруг элемента. По умолчанию плагин уже автоматически применяет и удаляет эти два 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
        }
    });

});
16

нет 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;}
0

вы можете определить класс CSS с именем .input-validation-error который добавляется к элементу ввода плагином проверки jQuery при нарушении правила проверки.

.input-validation-error {
    border: solid 1px #ff0000;
}
0

вы можете добавить класс для ввода / textareas, который добавит красную границу

я назвал его .ошибка

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

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

затем используйте jquery, чтобы найти входные / текстовые области с классом'.error ' и empty установите значение пустым.

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

Jsfiddle V1

Обновлено

пример 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

-1