Jquerry Error / Success Message from ClientSide and ServerSide in ASP.Net

In this post i will show How to show round corner ErrorMessage and SuccessMessage in JQuery and the same Messages from ServerSide when error occurs and when the condition is true.....

Validation Script :

 <script type="text/javascript">
     function validations()
     {         
         var res = $('[id$=txtFName]').val();
         var res1 = $('[id$=txtLName]').val();
         var res11 = $('[id$=txtMobile]').val();
         var res22 = $('[id$=txtMailID]').val();
         var res2 = $('[id$=txtStreet]').val();
         var res3 = $('[id$=txtCity]').val();
         var res4 = $('[id$=txtState]').val();
         var isChecked = $('[id$=chkSelect]').is(':checked');//CheckBox
         var isSelected = $('[id$=rdSelect]').prop('checked');//RadioButton
         if(res.trim() == '')
         {
             $("span").remove();
             $('[id$=divMessage]').append('<span class="Error">First Name is Required</span>');
             $('[id$=txtFName]').focus();
             $('[id$=divMessage]').fadeTo(2000,1).fadeOut(3000);
             return false;         
         }
         else if(res1.trim() == '')
         {
             $("span").remove();
             $('[id$=divMessage]').append('<span class="Error">Last Name is Required</span>');
             $('[id$=txtLName]').focus();
             $('[id$=divMessage]').fadeTo(2000,1).fadeOut(3000);
             return false;         
         }
         else if(res11.trim() == '')
         {
             $("span").remove();
             $('[id$=divMessage]').append('<span class="Error">Mobile No is Required</span>');
             $('[id$=txtMobile]').focus();
             $('[id$=divMessage]').fadeTo(2000,1).fadeOut(3000);
             return false;         
         }
          else if(res22.trim() == '')
         {
             $("span").remove();
             $('[id$=divMessage]').append('<span class="Error">Mail-ID is Required</span>');
             $('[id$=txtMailID]').focus();
             $('[id$=divMessage]').fadeTo(2000,1).fadeOut(3000);
             return false;         
         }
          else if(res2.trim() == '')
         {
             $("span").remove();
             $('[id$=divMessage]').append('<span class="Error">Street No is Required</span>');
             $('[id$=txtStreet]').focus();
             $('[id$=divMessage]').fadeTo(2000,1).fadeOut(3000);
             return false;         
         }
         else if(res3.trim() == '')
         {
             $("span").remove();
             $('[id$=divMessage]').append('<span class="Error">City Name is Required</span>');
             $('[id$=txtCity]').focus();
             $('[id$=divMessage]').fadeTo(2000,1).fadeOut(3000);
             return false;         
         }
         else if(res4.trim() == '')
         {
             $("span").remove();
             $('[id$=divMessage]').append('<span class="Error">State Name is Required</span>');
             $('[id$=txtState]').focus();
             $('[id$=divMessage]').fadeTo(2000,1).fadeOut(3000);
             return false;         
         }
         else if(!isChecked)
         {
            $("span").remove();
             $('[id$=divMessage]').append('<span class="Error">Accept Conditions</span>');             
             $('[id$=divMessage]').fadeTo(2000,1).fadeOut(3000);
             return false;         
         }
          else if(!isSelected)
         {
            $("span").remove();
             $('[id$=divMessage]').append('<span class="Error">T&C Apply</span>');             
             $('[id$=divMessage]').fadeTo(2000,1).fadeOut(3000);
             return false;         
         }
         else
         {
             $("span").remove();
             $('[id$=divMessage]').append('<span class="Success">Success</span>');         
             $('[id$=divMessage]').fadeTo(2000,1).fadeOut(3000);
             return true;         
         }
    </script>

CSS for Messages :

<style type="text/css">
        .Error
        {
            background-color: Red;
            color: White;
            font-weight: bold;
            font-family: Georgia, "Times New Roman" , Times, serif;
            font-size: 15px;
            font-style: italic;
            padding-left: 6px;
            padding-right: 6px;
            padding-bottom: 6px;
            padding-top: 6px;
            -webkit-border-radius: 20px;
            -moz-border-radius: 20px;
            border-radius: 20px;
            -webkit-box-shadow: #B3B3B3 9px 9px 9px;
            -moz-box-shadow: #B3B3B3 9px 9px 9px;
            box-shadow: #B3B3B3 6px 6px 6px;
        }
        .Success
        {
            background-color: Green;
            color: White;
            font-weight: bold;
            font-family: Georgia, "Times New Roman" , Times, serif;
            font-size: 15px;
            font-style: italic;
            padding-left: 6px;
            padding-right: 6px;
            padding-bottom: 6px;
            padding-top: 6px;
            -webkit-border-radius: 20px;
            -moz-border-radius: 20px;
            border-radius: 20px;
            -webkit-box-shadow: #B3B3B3 9px 9px 9px;
            -moz-box-shadow: #B3B3B3 9px 9px 9px;
            box-shadow: #B3B3B3 6px 6px 6px;
        }
    </style>

From Server Side : 

 Success Message :

ScriptManager.RegisterStartupScript(this.Page, this.GetType(), 

              "ShowMessage", "SuccessMessage('SuccessFully Saved');", true);
 

 Error Message :

ScriptManager.RegisterStartupScript(this.Page, this.GetType(), 

              "ShowMessage", "ErrorMessage('Error while Saving');", true);
 

DownLoad From HERE