jquerymobile.html 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>My Page</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
  8. <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
  9. <script src="https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
  10. <script src="../dist/jquery.validate.js"></script>
  11. <style>
  12. label.error {
  13. color: red;
  14. font-size: 16px;
  15. font-weight: normal;
  16. line-height: 1.4;
  17. margin-top: 0.5em;
  18. width: 100%;
  19. float: none;
  20. }
  21. @media screen and (orientation: portrait) {
  22. label.error {
  23. margin-left: 0;
  24. display: block;
  25. }
  26. }
  27. @media screen and (orientation: landscape) {
  28. label.error {
  29. display: inline-block;
  30. margin-left: 22%;
  31. }
  32. }
  33. em {
  34. color: red;
  35. font-weight: bold;
  36. padding-right: .25em;
  37. }
  38. </style>
  39. </head>
  40. <body>
  41. <div id="page1" data-role="page">
  42. <div data-role="header">
  43. <h1>Welcome</h1>
  44. </div>
  45. <div data-role="content">
  46. <form method="GET">
  47. <div data-role="fieldcontain">
  48. <label for="email">Email:</label>
  49. <input type="email" name="email" id="email">
  50. </div>
  51. <div data-role="fieldcontain">
  52. <label for="password">Password:</label>
  53. <input type="password" name="password" id="password">
  54. </div>
  55. <input data-role="submit" type="submit" value="Login">
  56. </form>
  57. </div>
  58. </div>
  59. <script>
  60. $( "#page1" ).on( "pageinit", function() {
  61. $( "form" ).validate({
  62. rules: {
  63. email: {
  64. required: true
  65. },
  66. password: {
  67. required: true
  68. }
  69. },
  70. errorPlacement: function( error, element ) {
  71. error.insertAfter( element.parent() );
  72. }
  73. });
  74. });
  75. </script>
  76. </body>
  77. </html>