jquery validation example

a simple validation when input type button is click using jquery validation plugins

by shatul patil

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<div class="black_bg">
   <h1 class="gen">Get Started Now</h1>
   <hr class="get"><form method="post" action="" id="register-form">
     <input type="text" name="Name" placeholder="Name" class="box">
     <input type="text" name="Email" placeholder="Email" class="box">
     <input type="text" name="Phone" placeholder="Phone" class="box">
     <input type="text" name="Website" placeholder="Website Url" class="box">
     <textarea rows="8" cols="50" name="Description" placeholder="Description"  class="box"  id="high"></textarea>
     <button class="green_btn">Submit </button>
     </form></div>

CSS

.black_bg {
    background: #333333 none repeat scroll 0 0;
    border-radius: 10px;
    margin: 40px 0;
    padding: 20px 0 40px;
    text-align: center;
    width: 40%;
}
.gen {
    color: #fff;
    font-size: 36px;
    text-transform: uppercase;
    width: 100%;
}
.get {
    margin: 15px auto;
    width: 78%;
}
.box {
    border: medium none;
    border-radius: 5px;
    font-size: 16px;
    height: 45px;
    margin-bottom: 10px;
    max-width: 312px;
    padding-left: 20px;
    width: 100%;
}
#high {
    font-size: 16px;
    height: 75px;
    margin-bottom: 20px;
}
.green_btn {
    background: #7dbc59 none repeat scroll 0 0;
    border-bottom: 4px solid #2b7a19;
    border-radius: 10px;
    color: #fff;
    font-size: 28px;
    line-height: 60px;
    margin: 0 auto;
    max-width: 228px;
    text-transform: uppercase;
    width: 100%;
}
.box.error {
    margin-left: 44px;
    padding-left: 20px;
}
.error {
    color: red;
    display: block;
    padding-bottom: 10px;
}

JavaScript

$(document).ready(function(){
    //form validation rules
            $("#register-form").validate({
                rules: {
                    Name: "required",
                    Email: {
                        required: true,
                        email: true
                    },
                    Phone: {
	                number: true,
	                required: true,
	                maxlength: 10,
	                minlength: 8
	            },
	            Website: {
		      required: true,
		      url: true
		    }
                },
                messages: {
                    Name : "Please enter your Name",               
                    Email: "Please enter a valid email address",
                    Phone: "Please enter a valid Phone number",     
                    Website: {
                    	required: "Please enter a valid Website url",
                    	url: "Please enter Website url http"
                    }                  
                },
                submitHandler: function(form) {
                    form.submit();
                }
            });
  });