jquery form validation plugin

jquery form validation plugin

Hi,

   i am trying to use jquery form validation plugin but it is not working.i am new web development so i dont understand what is wrong. here is my code .i am testing my code in iphone simulator

  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <meta charset="utf-8">
  6. <title>Management</title>
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">
  8.     <title>jQuery Mobile</title>
  9.     
  10.       <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  11.       
  12.        <script src="./js/lib/jquery.validate.js"></script>
  13.  <script src="./js/lib/jquery.validate.min.js"></script>

  15. <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
  16.   
  17. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
  18. <link rel="stylesheet" href="./css/login.css" />
  19. <link rel="stylesheet" href="./css/login.min.css" />
  20. <style>
  21. </style>
  22. <script>
  23. $('form').validate({
  24. rules: {
  25. email: {
  26. required: true
  27. },
  28. password: {
  29. required: true
  30. }
  31. }
  32. });
  33. </script>

  35. </head>
  36. <body >
  37. <div data-role="page" >

  39. <div data-role="header"  id="header" data-position="fixed" data-tap-toggle="false" data-fullscreen="true"  data-theme="f"  > 

  41. <p style="text-align:center; ">Management</p>


  44. </div>
  45. <div data-role="content" >

  47. <div  style="position:absolute;left:50%;top:50%;margin-left:-100px;margin-top:-50px;"  >
  48. <form method="GET">
  49. <div data-role="fieldcontain">
  50. <label for="email">Email:</label>
  51. <input type="email" name="email" id="email" />
  52. </div>
  53. <div data-role="fieldcontain">
  54. <label for="password">Password:</label>
  55. <input type="password" name="password" id="password" />
  56. </div>
  57. <input data-role="submit" type="submit" value="Login" />
  58. </form>
  59. </div>
  60. <div >
  61. </div> <!--end of main div -->
  62. </div><!--end of content -->
  63. <!--<div data-role="footer" data-fullscreen="true"   data-position="fixed" data-theme="b" style=" position:absolute; bottom:0; width:100%;">
  64. <h1>Mac</h1>
  65. </div>end of footer -->
  66. </div><!--end of page -->
  67. </body>
  68. </html>