Question

反正我是否可以将错误的边框颜色更改为红色并删除文本？这几乎是我想要显示的唯一错误，一旦输入/ 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&#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

执行以下操作：

1）将errorPlacement回调函数设置为return false以禁止显示错误消息文本。

2）修改插件.error＆amp;的CSS。 .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
        }
    });

});

Answer 2

没有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;}

Answer 3

您可以定义一个名为 .input-validation-error 的CSS类，当验证规则被破坏时，该类被jQuery验证插件添加到输入元素中。

＆＃13;

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

＆＃13;

Answer 4

您可以在输入/ textareas中添加一个类，以添加红色边框

我把它称为.error

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

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

然后使用jquery去查找带有'.error'类的输入/ textareas，并将其设置为空白。

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

jquery验证插件 - 更改边框颜色+无文本

4 个答案: