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

jquery validation plugin- change border color + no text

提问by vytfla

Is there anyway I can change the border-color to red on an error rather and get rid of the text? That's pretty much the only error I want to display, and it would disappear once the input/textarea becomes focused.

无论如何，我可以在错误时将边框颜色更改为红色并删除文本吗？这几乎是我想要显示的唯一错误，一旦 input/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>

回答by Sparky

Do the following:

请执行下列操作：

1) Set the errorPlacementcallback function to return falseto suppress the error message text.

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

2) Modify the CSS for the plugin's .error& .validclass's to show colored borders, or whatever, around the element. By default, the plugin already automatically applies and removes these two class's, so there's no special plugin options to set for this.

2) 修改插件的.error&的 CSS 以.validclass在元素周围显示彩色边框或其他任何内容。默认情况下，插件已经自动应用并删除了这两个class，因此没有为此设置特殊的插件选项。

Working DEMO: http://jsfiddle.net/8vQFd/

工作演示：http: //jsfiddle.net/8vQFd/

jQuery:

jQuery：

$(document).ready(function () {

    $('#myform').validate({ // initialize the plugin
        // your rules and options,
        errorPlacement: function(){
            return false;  // suppresses error message text
        }
    });

});

回答by vytfla

No Jquery No Add other/ Modify Any Functionality Just Add Css

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

回答by Mohammad Sakhidel

You can define a CSS class named .input-validation-errorwhich is added to the input element by jQuery validation plugin when a validation rule is broken.

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

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

回答by Eli Stone

You could add a class to your input / textareas that would add a red border

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

I called it .error

我称之为 .error

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

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

Then use jquery to go and find the input /textareas with the class '.error' and empty set the value of it to blank.

然后使用 jquery 去找到类 '.error' 的输入 /textareas 并将它的值设置为空。

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

Jsfiddle V1

Jsfiddle V1

Updated

更新

Example of JS

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

CSS

 input:focus,textarea:focus{
  border-color: initial;
 }

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

HTML

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

JSfiddle V2