jQuery 验证失败时更改输入名称和错误消息的颜色

Change color of input name and error message when validation is failed

提问by daniel_serretti

I'm using jQuery validate and I'm having problems with changing the color of the error messages and the input field name.. I tried using only CSS, here is the code:

我正在使用 jQuery 验证，但在更改错误消息的颜色和输入字段名称时遇到问题。我尝试仅使用 CSS，这是代码：

#news_action input.error {
  color: red;
}

but this changes only the color of the input field text.. How can I select the input field name and the error messages with CSS? If anyone have another solution without using CSS, it's welcome at all. Can anyone help me? Thanks in advance

但这只会改变输入字段文本的颜色.. 如何使用 CSS 选择输入字段名称和错误消息？如果有人在不使用 CSS 的情况下有其他解决方案，那么欢迎使用。谁能帮我？提前致谢

Here is my html:

这是我的 html：

<div class="info">
  Type your name:<input id="input-name" type="text" name="name"/> <br>
  Type your email:<input type="text" name="email"/>
</div>

回答by Arun P Johny

You need to wrap each input control and its label in a container, then you can use the highlight and unhighlight methods to add the error class to the container

您需要将每个输入控件及其标签包装在一个容器中，然后您可以使用 highlight 和 unhighlight 方法将错误类添加到容器中

jQuery(function ($) {
    var validator = $('#news_action').validate({
        rules: {
            name: {
                required: true
            },
            email: {
                required: true,
                email: true
            }
        },
        messages: {},
        highlight: function (element) {
            $(element).parent().addClass('error')
        },
        unhighlight: function (element) {
            $(element).parent().removeClass('error')
        }
    });
});

#news_action .error {
    color: red;
}

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>
<form id="news_action" method="post" action="">
    <div class="info">
        <div>Type your name:<input id="input-name" type="text" name="name"/></div>
        <div>Type your email:<input type="text" name="email"/></div>
    </div>
    <input type="submit" class="button" value="Submit" />
</form>

回答by Marline

I'm using javascript to do the same (validate a form with upladed files), i hope it will be convient to what you want to do

我正在使用 javascript 来做同样的事情（验证带有上传文件的表单），我希望它能够满足您的需求

 $(document).ready(function() {

$(".verif_form_ajax").submit(function(){   
        var $inscription_form = $('#inscription_form');

        var process;

        process=1;

        $(".obg").each(function(){
            var length = $(this).val();
                 if(length==""){
                     $(this).css('border-color','#c89494'); 
                      $(this).css('background-color','#F9D3D3');    
                     process=0;                      
                 }else{
                    $(this).css('border-color','#9ac894');
                     $(this).css('background-color','#dbfcd7'); 
                 }  
        });

        $(".obg").blur(function(){
            var length = $(this).val();
                 if(length==""){
                     $(this).css('border-color','#c89494'); 
                      $(this).css('background-color','#F9D3D3');    
                     process=0;                      
                 }else{
                    $(this).css('border-color','#9ac894');
                     $(this).css('background-color','#dbfcd7'); 
                 }  
        });

        if(process=="0"){   
          return false;         
        }
        else{
        file = $('#userfile').val();
        contentType:attr( "enctype", "multipart/form-data" ),
        $.post($(this).attr("action"),  {file:file}, $(this).serialize(), function(data){
            // do wathever you want to do when form is posted
            $inscription_form.html(data);
        });
        return false;

        }
});



});

then in the form whetever you want a validate filed you put it a class ="obg" like this

然后在表单中，无论您想要验证文件，您都将其添加为类 =“obg”

 <label>Namen :</label>
 <input class="obg" type="text" placeholder="Your name" name="denomination" id="denomination" > 

PS : please excuse my poor English!!

PS：请原谅我糟糕的英语！！

回答by YakuZa

Well its pretty easy now. If you inspect the page, you will find they add labels for error and those labels have a class named error.

那么它现在很容易。如果您检查页面，您会发现它们添加了错误标签，并且这些标签具有名为error.

Thus you may add the CSS:

因此，您可以添加 CSS：

.error { color:red !important; }

.error { color:red !important; }

回答by Victor

You can use the required attribute from html5:

您可以使用 html5 中的 required 属性：

<!-- add 'required' -->
Type your name: <input id="input-name" type="text" name="name" required/> <br>

<!--change type to 'email' and add 'required' -->
Type your email: <input type="email" name="email" required/> 

or handle your form submit: http://jsfiddle.net/vcarvalho/77o94fzw/

或处理您的表单提交：http: //jsfiddle.net/vcarvalho/77o94fzw/

回答by mutasim

I used below style in my css after finding that JQuery validation generates emelements for error messages

在发现 JQuery 验证em为错误消息生成元素后，我在我的 css 中使用了以下样式

<style type="text/css">
    em {
        color: Red;           
    }
</style>