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

Question

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:

#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

Here is my 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>

We might need some more code for context. But maybe you can just add the same class to both elements, and change the color of that class? — Calvin Scherle
– Calvin Scherle, Commented Oct 20, 2014 at 13:03
this fiddle almost solve my problem.. it changes the color of the input field names, but the error messages still at the same color. — Daniel Serretti
– Daniel Serretti, Commented Oct 20, 2014 at 13:21

Arun P Johny · Accepted Answer · 2014-10-20 13:16:05Z

8

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

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>

answered Oct 20, 2014 at 13:16

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Daniel Serretti Over a year ago

That's it !! Thank you guys! PS: I noticed when the error message appears, the validate add a label with an id based on the input field name, I just made a class for that new id. And about the input field name, the highlight and unhighlight methods works fine for me.

Marline · Accepted Answer · 2014-10-20 13:11:45Z

2

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

 $(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

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

PS : please excuse my poor English!!

answered Oct 20, 2014 at 13:11

Marline

234 bronze badges

2 Comments

Daniel Serretti Over a year ago

It's a little different of what I want, but thank you for your attention. I will try it! ;]

ArunDhwaj IIITH Over a year ago

'$(this).css('background-color','#F9D3D3');' has helped me. Thanks @Marline.

YakuZa · Accepted Answer · 2016-02-10 10:52:52Z

2

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 .

Thus you may add the CSS:

.error { color:red !important; }

answered Feb 10, 2016 at 10:52

YakuZa

5267 silver badges12 bronze badges

Comments

Victor · Accepted Answer · 2014-10-20 13:27:38Z

0

You can use the required attribute from 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/>

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

answered Oct 20, 2014 at 13:27

Victor

5,1613 gold badges44 silver badges58 bronze badges

1 Comment

Rushikesh Gomekar Over a year ago

Question is asked about jQuery validate. And plus, required tag is not supported in Safari browser.

ByteHamster · Accepted Answer · 2015-05-02 11:15:01Z

0

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

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

edited May 2, 2015 at 11:15

ByteHamster

4,9719 gold badges41 silver badges56 bronze badges

answered May 2, 2015 at 10:54

mutasim

1

Collectives™ on Stack Overflow

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

5 Answers 5

1 Comment

2 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related