Display Group Errors
CSS Code
.label_col{
 width:20%;
  padding:5px;
float:left;
}

.field{
 width:75%;
  padding:5px;
 float:left;
}
.error_field{
 width:75%;
  padding:5px;
 float:left;


}
.error_msg{
display:none;
 clear:both;
   color:#f00;
}

li{
    width:100%;
    float:left;
}

.error_group{
 background-color: #FFCCCC;    color: #5E3232;

 padding:10px;
    display:none;
  margin:5px;
}
Jquery Code
$(document).ready(function(){
    $('#targets').submit(function() {
      var error=0;
        $('#error_group').html("");
        var name = $('#name').val();
        if(name == ''){
            error = 1;
            $('#error_group').append("
Name cannot be empty"); } var country = $('#country').val(); if(country == '0'){ error = 1; $('#error_group').append("
You should select a country."); } var comment = $('#comment').val(); if(comment == ''){ error = 1; $('#error_group').append("
Comment cannot be empty."); } if(!($('#checkboxid').is(':checked'))) { error = 1; $('#error_group').append("
Please Tick the Agree to Terms of Use."); } if(error){ $('#error_group').show(); return false; }else{ return true; } }); });
HTML Code
  • Name
  • Country
  • Comment
  •  
    I Agree to Terms of Use
  •  

Follow Me On Twitter

Advertise Here

Follow Us On Facebook