Validation

Validation using jquery

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<h1>Form Validation Example</h1>
<form id='transactionform' name='transactionform' method='post' action='' >
   <p>
       Name: 
       <input type='text' name='nombre' id='nombre' class='required' />
       <input type='hidden' name='id' id='id' class='required' />
       <span id="invalid-nombre" />
   </p>
   <p>
       <input type='submit' name='Submit' value='Submit' />
   </p>
   <div id="summary">
       <h3>Validation summary</h3>
       <p>
           <span id="invalid-id" />
       </p>
   </div>
</form>

CSS

.error {
    font: normal 10px arial;
    padding: 3px;
    margin: 3px;
    background-color: #ffc;
    border: 1px solid #c00;
}
body{font-size:x-large;background:#CCC;}
h1{margin-bottom:20px;}
form{padding:50px;}

JavaScript

$(document).ready(function(){
    $("#transactionform").validate({
       rules: {
        'cliente[nombre]': {
           required: true,
           minlength: 5
        },
        'cliente[id]': {
           required: true
        }
      },
      errorPlacement: function(error, element) {
        error.appendTo('#invalid-' + element.attr('id'));
        }
    });
});