Validation

Validation using jquery

by Osama Mursleen

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<form id='registerForm' name='registerForm' method='post' action='' >   <p>
   Name: <input type='text' name='name' id='name' class='required' min='3' max='10' />
   </p>
   <p>
   Email: <input type='text' name='email' id='email' class='required' minlength='3'/>
   </p>
   <p>
   <input type='submit' name='Submit' value='Submit' />
   </p>
</form>
<div class="errorContainer">
    <div id="errordiv" style='display: none;'>Please fill all required fields.</div>
</div>

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(){
    $("#registerForm").validate({
        errorPlacement: function(error, element) {
            error.insertAfter(element);
        },
        showErrors: function(errorMap, errorList){
        		var $errorDiv = $("#errordiv").empty().show();            
            this.defaultShowErrors();
            var errorsCombined = "";
            for(var el in errorMap){
            		errorsCombined += "<b>"+ el + "</b>" + errorMap[el]+"<br/>";
            }
            $errorDiv.append(errorsCombined);
        },
        submitHandler: function(form) {
            // Submit the form
            form.submit();
        },
        invalidHandler: function(event, validator) {
        }
    });
  });