<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Form With Validation</h2> <form class="form-horizontal validateForm"> <div class="form-group"> <label class="control-label">First Name</label> <input type="text" class="form-control firstName" id="firstName" /> </div> <div class="form-group"> <label class="control-label">Last Name</label> <input type="text" class="form-control lastName" id="lastName" /> </div> <div class="form-group"> <label class="control-label">Username</label> <input type="text" class="form-control username" id="username" /> </div> <div class="form-group"> <label class="control-label">Password</label> <input type="text" class="form-control password" id="password" /> </div> <div class="form-group"> <label class="control-label">Confirm Password</label> <input type="text" class="form-control cpassword" id="cpassword" /> </div> <div class="form-group"> <label class="control-label hidden"></label> <button class="btn btn-success">Register</button> </div> </form> </div> </div>

(function($){ $.fn.validateForm = function(options){ var self = this, $self = $(self); var defaults = { a:2, c: {d:3} }; $.extend(true,options,defaults); console.log(options); }; })(jQuery); $(document).ready(function(){ $(".validateForm").validateForm({ a:5, b:2, c:{ d:3, e:{ f:5 } } }); });