JQuery Validation Issues

JQuery Validation Issues

Having issues getting jquery validation to work, any help would be greatly appreciated!

HTML
  2. <!doctype html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <title> Form Scrape </title>
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  8.     <script src="validation/dist/jquery.validate.js"></script>
  9.     <link href="theme/jquery-ui.css" rel="stylesheet">
  10.     <link href = "css/formPrototype.css" rel="stylesheet">
  11.     <script src="theme/jquery-ui.js"> </script>
  12.     <script src="js/formValidation1.js"> </script>
  13. </head>
  14. <body>
  15. <div id = "userForm">
  16. <div id = "tabs">
  17.      <ul> 
  18.         <li><a href = "#userInfo"> Your Information </a> </li>
  19.             <li><a href = "#eventInfo"> Event Information </a> </li>
  20.         </ul>
  22.         <div id = "userInfo">
  23.         <form id = "1"> 
  24.         <span> Name </span> <br /><input type="text" id = "userName" required autofocus> <br />
  25.             <span> City </span>  <br /> <input type="text" id = "userCity"> <br />
  26.             <span> Phone Number </span> <br /> <input type="tel" id = "userPhone" required> <br />
  27.             <span> Email </span> <br /> <input type="email" id = "userEmail" required> <br />
  28.             <input type="checkbox" id = "emailCheck" value = "Yes"> Is it okay for Prestige to email you? <br /> <br />
  29.             <span> Company (If Applicable) </span> <br /> <input type="text" id = "userCompany"> <br /> <br />
  30.            
  31.             <span> Password </span> <br /> <input type="password" id = "userPassword" required> <br />
  32.             <span> Verify Password </span> <br /> <input type="password" id = "userPasswordVerify" required> <br />
  33.         </form>
  34.         </div>
  35.         <div id = "eventInfo"> 
  36.          <form id = "2">
  37.         <span> Type of Event </span> <br />
  38.    
  39.                 <input type="radio" name = "eventType" value = "Wedding" class="radioButton"> Wedding <br />
  40.                 <input type="radio" name = "eventType" value = "Party" class = "radioButton"> Party <br />
  41.                 <input type="radio" name = "eventType" value = "Banquet" class = "radioButton"> Banquet <br />
  42.                 <input type="radio" name = "eventType" value = "Birthday" class = "radioButton"> Birthday <br />
  43.                 <input type="radio" name = "eventType" value = "WorkEvent" class = "radioButton"> Work Event <br />
  44.                 <input type="radio" name = "eventType" value = "Other" class = "radioButton"> Other <input type="text" id = "other"> <br /> <br />
  45.                    
  46.                 <span> Date of Event </span> <br />
  47.                 <input type= "text" id = "eventDate" class="datepicker" required> <br /> <br />
  48.                 
  49.                 <label for = "genre"> Genre of Music</label>
  50.                 <select name = "genre" id = "genre">
  51.                 <option>Rock</option>
  52.                     <option>Country</option>
  53.                     <option>Pop</option>
  54.                     <option>Jazz</option>
  55.                     <option>Blues</option>
  56.                     <option>Folk</option>
  57.                     <option>Alternative</option>
  58.                     <option>Swing</option>
  59.                     <option>Reggae</option>
  60.                     <option>Electronic</option>
  61.                     <option>Hip-Hop</option>
  62.                     <option> R&B </option>
  63.                 </select>
  64.                 <br />
  65.                 
  66.                 <p>
  67.                 <label for="budget">What is your budget? </label>
  68.   <input id="budget" name="budget" required>
  69.                 </p>
  70.             </form>
  71.              <button type="submit" id="submit"> Submit </button>
  72.             <button type="button" id="reset"> Reset </button>      
  73.         </div>
  74. </div>
  75.  <div id = "output"></div>
  76. </div>
  77. </body>
  78. </html>
Javascript
  2. // JavaScript Document
  3. $(document).ready(function() {

  5. $('form').each(function () {
  6.     $(this).validate();
  7. });
  8. $( "#accordion" ).accordion();

  10. $( "button" ).button();

  12. $( "#button-icon" ).button({
  13. icon: "ui-icon-gear",
  14. showLabel: false
  15. });

  17. $( "#radioset" ).buttonset();

  19. $( "#controlgroup" ).controlgroup();

  21. $( "#tabs" ).tabs();

  23. $( ".datepicker" ).datepicker({
  24. inline: true
  25. });

  27. $( "#spinner" ).spinner();

  29. $( "#budget" ).spinner({
  30. step: 250
  31. });

  33. $( "#budget" ).spinner("value", 1000);

  35. $( "#menu" ).menu();

  37. $( "#tooltip" ).tooltip();

  39. $( "#selectmenu" ).selectmenu();

  41. $("#genre").selectmenu();

  43. $("#reset").click (function () {
  44. $('#1')[0].reset();
  45. $('#2')[0].reset();
  47. $('#output').html('');
  48. });

  50. $('#submit').click (function () {

  53. //Need to get all input and store in variables to then be ouput to the output div
  54. var userName = $('#userName').val();
  55. var userCity = $('#userCity').val ();
  56. var userPhone = $('#userPhone').val ();
  57. var userEmail = $('#userEmail').val ();
  58. var canEmail = $('input[id = emailCheck]:checked').val();
  59. var canEmailOutput = 'null';
  61. if (canEmail === 'Yes') {
  62. canEmailOutput = 'Yes';
  63. }
  65. else {
  66. canEmailOutput = 'No';
  67. }
  69. var userCompany = $('#userCompany').val ();
  70. var userPassword = $('#userPassword').val ();
  71. var userPasswordVerify = $('#userPasswordVerify').val();
  72. var eventType = $('input[name=eventType]:checked').val();
  73. var eventTypeOutput = 'null';
  75. if (eventType === "Other") {
  76. eventTypeOutput = $('#other').val();
  77. }
  79. else {
  80. eventTypeOutput = eventType;
  81. }
  83. var eventDate = $('#eventDate').val();
  84. var genre = $('#genre').val ();
  85. var budget = $('#budget').val();
  87. $('#output').html('Name: ' + userName + '<br />' +
  88.                 'City: ' + userCity + '<br />' +
  89. 'Phone: ' + userPhone + '<br />' +
  90. 'Email: ' + userEmail + '<br />' +
  91. 'Okay to Email?: ' + canEmailOutput + '<br />' +
  92. 'Company: ' + userCompany + '<br />' +
  93. 'Password: ' + userPassword + '<br />' +
  94. 'Password Verification: ' + userPasswordVerify + '<br />' +
  95. 'Event Type: ' + eventTypeOutput + '<br />' +
  96. 'Event Date: ' + eventDate + '<br />' +
  97. 'Genre: ' + genre + '<br />' +
  98. 'Budget: ' + budget + '<br />'
  99. );
  100.  
  101. return false;
  102. });

  104. // Hover states on the static widgets
  105. $( "#dialog-link, #icons li" ).hover(
  106. function() {
  107. $( this ).addClass( "ui-state-hover" );
  108. },
  109. function() {
  110. $( this ).removeClass( "ui-state-hover" );
  111. }
  112. );

  114. });