jquery validation

  127 <asp:Content ID="Content3" ContentPlaceHolderID="javascript" runat="server"> 

  128     <script type="text/javascript">

  129         $.validator.addMethod("lettersonly", function(value, element) {

  130             return this.optional(element)  /^[a-z]+$/i.test(value);

  131         }, "Letters only please");

  132

  133         $(document).ready(function() {

  134             $('form').validate({

  135                 errorLabelContainer: "#errorMessageBox"

  136                 , wrapper: "li"

  137                 , errorClass: "invalid"

  138                 //, submitHandler: function() { alert("Submitted!") }

  139             })

  140             $('#<%=FirstName.ClientID %>').rules("add", {

  141                 minlength: 2

  142                 , required: true

  143                 , lettersonly : true

  144                 , messages: {

  145                     minlength: jQuery.format("At least {0} characters are required for the first name")

  146                     , required: "First name is required"

  147                 }

  148             });

  149             $('#<%=LastName.ClientID %>').rules("add", {

  150                 minlength: 2

  151                 , required: true

  152                 , lettersonly: true

  153                 , messages: {

  154                     minlength: jQuery.format("At least {0} characters are required for the last name")

  155                     , required: "last name is required"

  156                 }

  157             });

  158         });

  159     </script>

  160 </asp:Content>

   19                 <div>

   20                     <ul id="errorMessageBox"></ul>

   21                 </div>

   22                 <div class="clear"></div>

   23                 <label>

   24                     <asp:Label ID="lblFirstName" runat="server"

   25                         Text="<%$ Resources:Resource,LabelFirstName%>"></asp:Label>

   26                 </label>

   27                 <asp:TextBox ID="FirstName" runat="server" class="normal" MaxLength="50"></asp:TextBox><br />

   28                 <label>

   29                     <asp:Label ID="lblLastName" runat="server"

   30                         Text="<%$ Resources:Resource,LabelLastName%>"></asp:Label>

   31                 </label>

   32                 <asp:TextBox ID="LastName" runat="server" class="normal" MaxLength="50"></asp:TextBox><br />

here is the css ...   

   95 /*validation part*/

   96 label.invalid { float: none; text-align: left; width: 100%; color:#ee3333; font-weight:normal; padding: 3px 0px; }

   97 input.invalid { background-color:#FFeeee; color:#ee3333; }

   98 select.invalid { background-color:#FFeeee; border:3px double #ff9999; color:#ee3333; }

   99 #errorMessageBox { margin-bottom: 15px;  }

  100 #errorMessageBox li { margin: 0px 40px 0px 40px; padding: 5px 20px; color:#ee3333; background: #FFeeee;
  101 text-transform: none; list-style-type: disc; list-style-position: inside;}

  102 #errorMessageBox label { text-transform: none; }