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

Question

无论如何我可以在错误时将边框颜色更改为红色而不是删除文本吗？这几乎是我想要显示的唯一错误，一旦输入/文本区域成为焦点，它就会消失。

<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 和 .valid class 的 CSS 以在元素周围显示彩色边框或其他内容。默认情况下，插件已经自动应用和删除这两个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 验证插件添加到输入元素中。

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

Answer 4

一个非常简单的基于 css 的方法如下所示：

input.error{border: 1px solid red;}

您可能希望对此进行扩展，但这是一个很好的起点。

Answer 5

您可以在输入/文本区域中添加一个类来添加红色边框

我称之为.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