jQuery-validate Example

by bhumi

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/additional-methods.js"></script>
<div id="block"> 
 <form role="form" id="addForm" method="post">
     <div class="form-group">
         <label for="name">Name</label>
         <input type="text" class="form-control" name="name" id="name" placeholder="Enter name">
     </div>
     <div class="form-group">
         <label for="birthday">Birthday</label>
         <input type="text" class="form-control" id="birthday" required placeholder="Enter birthday">
     </div>
     <button name="submit" id="submit" value="" type="submit" class="btn btn-large btn-primary btn-block">Add</button>
 </form>
</div>

CSS

body {
    padding: 20px;
}

label {
    display: block;
}

input.error {
    border: 1px solid red;
}

label.error {
    font-weight: normal;
    color: red;
}

button {
    display: block;
    margin-top: 20px;
}

JavaScript

$().ready(function() {                 
    $("#addForm").validate({
        rules:{
            name:{
                required: true,
                minlength: 2,
                maxlength: 10,
            },
        },
        highlight: function (element) {
            $(element).closest('.form-group').addClass('has-error');
        },
        messages:{
            name:{
                required: "This field is required",
                minlength: "Name must be at least 2 characters",
                maxlength: "Maximum number of characters - 10",
            },
        },
        submitHandler: function(form) { 
              $.ajax({
                  url:'addEmpl.php',
                type:'GET',
                dataType: 'html',
                success: function(data) {
                    $("#block").html(data);
                }
             });
             return false; // required to block normal submit since you used ajax
         }
     });
});