php - Jquery Form Validation in ColorBox -

i click on link opens colorbox ... in colorbox have loaded form(addproject.php)

<a href="#" id="addproject"> <script>           $('#addproject').on('click',function(){               $.colorbox({                           width:'450px',height:'370px',top:'80px', opacity:0.3, iframe:true,href:"addproject.php"});                     });        }); </script> 

i want validate form fields of addproject.php displayed in colorbox. code in addproject.php --->

<script>     $(document).ready(function(){        $("#addpro").on("click",function(){            $("#validate").validate({             rules: {                     pro_name: "required",                     pro_desc: "required",                    },             messages: {             pro_name: "enter project name",             pro_desc: "enter project description",             },                       });                             var pro_name=$("#pro_name").val();             var pro_desc=$("#pro_desc").val();  $.ajax({                type:"post",                url:"./addprojects.php",                data:{                    pro_name:pro_name,pro_desc:pro_desc                },                success:function(data){                  $("#message").html(data);                  },              });          });      }); </script>  <form name="addproject" id="validate" action="" method="post"> <td> project name<span style="color: red" ><sup>*</sup></span> :</td> <td> <input type = 'text' name = 'pro_name' id = 'pro_name'/> </td> </tr>     <tr> <td>project description <span style="color: red;" ><sup>*</sup></span> :</td> <td> <input type = 'text' name = 'pro_desc' id= 'pro_desc'/> </td> </tr> <td><input type = 'button' id="addpro" name = 'save' value='submit' /> </td> </tr>< 

the ajax call goes page form data inserted(insert query written in addprojects.php)

the form not validated .. , jquery library used (on page addproject.php)

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/jquery.validate.min.js"></script> 

where going wrong validate form fields?