10

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

<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>
4

5 回答 5

20

请执行下列操作：

1) 设置errorPlacement回调函数return false来抑制错误消息文本。

2) 修改插件.error&的 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
        }
    });

});
于 2013-03-25T02:29:11.730 回答
1

没有 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;}
于 2017-10-13T10:01:24.393 回答
0

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

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

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

于 2021-11-11T06:50:15.870 回答
0

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

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

于 2018-06-04T11:55:31.387 回答
-1

您可以向您的输入/文本区域添加一个类，该类将添加一个红色边框

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

于 2013-03-25T01:47:35.450 回答