Clever Geek Handbook

Change input name color and error message on failed validation

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

#news_action input.error {
  color: red;
}

but this only changes the text color of the input field. How can I select the input field name and error messages using CSS? If anyone has another solution without using CSS, it is generally welcome. 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>
+3


source to share


5 answers


You need to wrap each input control and its shortcut in a container, then you can use highlight and ambiguity 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>
Run codeHide result


+7


source


I am using javascript to do the same (submit the form with upladed files), I hope it is handy for 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 whetever form you want to validate the validation you put it class = "obg" like this



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

PS: Excuse my poor English!

+2


source


Okay, now it's pretty easy. If you check the page, you will find that they are adding labels for the error, and these labels have a class named error

.

This way you can add CSS:

.error { color:red !important; }

+1


source


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/

0


source


I used below style in my CSS after I found that JQuery validation generates elements em

for error messages

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


source






More articles:


All Articles