<style type="text/css">  
  span.error {  
  font-style: italic;  
  font-weight: bold;  
  color: red;  
  }  

  div.validationCase {  
  padding: 20px 15px;  
  border: 1px solid;  
  background: none repeat scroll 0 0 #EEEEEE;  
  margin-bottom:15px;  
  }  

  div.validationCase p{  
  font-style:italic;  
  }  

  form label{  
  display:inline-block;  
  width: 220px;  
  }  

  form span{  
  font-style:italic;  
  color:gray;  
  }  
  </style>

  <script type="text/javascript" src="/js/jquery.numberLetters.js"></script>
  <script type="text/javascript">
  $(document).ready(function() {  
  $("input.letters").letters();  
  $("input.lettersAndSpace").lettersAndSpace();  
  $("input.numberLetters").numberLetters();  
  $("input.numberLettersAndSpace").numberLettersAndSpace();  
  $("input.numbers").numbers();  
  });
  </script>

<div class="validationCases">
  <div class="validationCase">
  <form>
  <label>Только буквы:</label>
  <input type="text" class="letters" name="name" maxlength="20" value=""/>
  <span>Code: $("input.letters").letters();</span>
  </form>
  <form>
  <label>Бкувы и пробелы:</label>
  <input type="text" class="lettersAndSpace" name="name" maxlength="20" value=""/>
  <span>Code: $("input.lettersAndSpace").lettersAndSpace();</span>
  </form>
  <form>
  <label>Буквы и цифры:</label>
  <input type="text" class="numberLetters" name="name" maxlength="20" value=""/>
  <span>Code: $("input.numberLetters").numberLetters();</span>
  </form>
  <form>
  <label>Цифры, буквы и пробелы:</label>
  <input type="text" class="numberLettersAndSpace" name="name" maxlength="20" value=""/>
  <span>Code: $("input.numberLettersAndSpace").numberLettersAndSpace();</span>
  </form>
  <form id="validateAfterAll">
  <label>Только цифры:</label>
  <input type="text" class="numbers" name="name" maxlength="20" value=""/>
  <span>Code: $("input.numbers").numbers();</span>
  </form>
  </div>
  </div>