Question

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

#news_action input.error {
  color: red;
}

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

这是我的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>

Answer 1

您需要将每个输入控件及其标签包装在一个容器中，然后您可以使用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>

Answer 2

我正在使用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;

        }
});



});

然后以你希望验证提交的形式，你把它设为class =“obg”就像这样

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

PS：请原谅我的英语不好!!

Answer 3

现在很容易。如果您检查页面，您会发现他们为错误添加标签，并且这些标签有一个名为error的类。

因此你可以添加CSS：

.error { color:red !important; }

Answer 4

您可以使用html5中的必需属性：

<!-- 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/>

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

Answer 5

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

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

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

5 个答案: