use-with-jquery-form-plugin.html 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>Used With jQuery Form Plugin</title>
  7. <link rel="stylesheet" href="demo.css">
  8. </head>
  9. <body>
  10. <form id="form1" class="form" data-validator-option="{timely:2, focusCleanup:true}">
  11. <div class="form-item">
  12. <label class="label">Username</label>
  13. <input type="text" name="username"
  14. data-rule="required; username;"
  15. data-rule-username="[/[\w\d]{4,30}/, 'Please enter 3-12 digits, letters, underscores']"
  16. data-tip="You can use letters, numbers and periods"
  17. >
  18. </div>
  19. <div class="form-item">
  20. <label class="label">Password</label>
  21. <input type="password" name="pwd"
  22. data-rule="Password: required; length(8~16)"
  23. data-tip="Please fill in at least eight characters"
  24. >
  25. </div>
  26. <div class="form-item">
  27. <button type="submit">Submit</button>
  28. </div>
  29. </form>
  30. <script src="https://cdn.jsdelivr.net/jquery/1.12.3/jquery.min.js"></script>
  31. <script src="https://cdn.jsdelivr.net/jquery.form/3.51/jquery.form.min.js"></script>
  32. <script src="../dist/jquery.validator.js?local=en"></script>
  33. <script>
  34. $(function(){
  35. // See: http://malsup.com/jquery/form/#api
  36. // Way 1: use .ajaxForm() directly
  37. $('#form1').ajaxForm({
  38. url: 'http://www.mocky.io/v2/5703d5b52700006b2606b00e',
  39. success: function(d) {
  40. alert(d.message)
  41. }
  42. });
  43. // Way 2: use .ajaxSubmit() after valid form
  44. /*$('#form1').on('valid.form', function(){
  45. $(this).ajaxSubmit({
  46. url: 'http://www.mocky.io/v2/5703d5b52700006b2606b00e',
  47. success: function(d) {
  48. alert(d.message)
  49. }
  50. });
  51. });*/
  52. // Way 3: ditto
  53. /*$('#form1').validator({
  54. valid: function(){
  55. $(this).ajaxSubmit({
  56. url: 'http://www.mocky.io/v2/5703d5b52700006b2606b00e',
  57. success: function(d) {
  58. alert(d.message)
  59. }
  60. });
  61. }
  62. });*/
  63. });
  64. </script>
  65. </body>
  66. </html>