JavaScript/hw5part1.html at master · marbleindex/JavaScript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html lang="en">
   <head>
      <!--Kristian Reyes 10/23/2020 -->
      <title>CNIT 133 Homework 5</title>
      <meta charset="utf-8">
      <meta name="description" content="homework 5 for CCSF CNIT 133">
      <meta name="keywords" content="HTML, CSS, Javascript, CCSF, Student">
      <meta name="author" content="Kristian Reyes">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!--bootstrap    -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
      <!--bootstrap    -->
      <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script> <!-- Validate Jquery -->
      <script>
         $(document).ready(function(){

           $("#myform").validate({
         // Messages to include if input is missing
             messages: {
               favcolor: "Please enter your favorite color",
               mood: "Please choose a mood",
               needs: "Please choose at least one need",
               vacation: "Please choose a destination",
               },

               errorPlacement: function(error, element) {   // for proper location of error messages
           if ( element.is(":radio") || element.is(":checkbox")) {
             error.appendTo( element.parent());
           } else {
             error.insertAfter(element);
           }
           }
          });
         });

      </script>
   </head>
   <body>
      <main class="grid">
         <header  class="grid-area grid-area-1">
            <h2> Homework 5 - Part 1 </h2>
         </header>
         <nav class="grid-area grid-area-2">
            <ul>
               <li>
                  <a href="homework5.html" title="CNIT 133 - HW 5 ">
                  Return to CNIT 133 Homework 5 - Arrays
                  </a>
               </li>
            </ul>
         </nav>
         <section class="grid-area grid-area-3">
            <h2> Part 1</h2>
            <h3> Please fill out the questionnnaire:</h3>
            <form action="hw5part1validation.html" method="post" id="myform" name="myform">
               <!-- Post method works on local but not on github (405 Not Allowed Error) -->
               <table>
                  <tr>
                     <td>Favorite Color:</td>
                     <td><input type="text" name="favcolor" id="favcolor" class="required" autofocus></td>
                  </tr>
                  <tr>
                     <td>Your Current Mood?</td>
                     <td>Excellent<input type="radio" id="mood1" name="mood" class="required" value="excellent">
                        Good<input type="radio" id="mood2" name="mood" class="required" value="good"> Average <input type="radio" id="mood3" name="mood" class="required" value="average">
                        Poor<input type="radio" id="mood4" name="mood" class="required" value="poor">
                     </td>
                  </tr>
                  <tr>
                     <td>Which of the following do you need?</td>
                     <td>Food<input type="checkbox" id="need1" name="needs" value="food" class="required">
                        Sleep<input type="checkbox" id="need2" value="sleep" name="needs">Money<input type="checkbox" id="need3" value="money" name="needs">Love<input type="checkbox" id="need4" value="love" name="needs">
                     </td>
                  </tr>
                  <tr>
                     <td><label for="vacation" class="label">Where would you like to travel to?</label></td>
                     <td>
                        <select name="vacation" id="vacation" class="required">
                           <option value=" ">SELECT ONE</option>
                           <option value="fiji">Fiji</option>
                           <option value="Italy">Italy</option>
                           <option value="Egypt">Egypt</option>
                           <option value="China">China</option>
                           <option value="Peru">Peru</option>
                           <option value="other">Other</option>
                        </select>
                     </td>
                  </tr>
                  <tr>
                     <td>
                        <input type="submit"  value="SUBMIT">
                        <input type="reset" value="RESET ALL" onclick="window.location.reload();">
                     </td>
                  </tr>
               </table>
            </form>
         </section>
         <footer class="grid-area grid-area-4">
            <p>
               &#169; 2020 Kristian Reyes
            </p>
         </footer>
      </main>
   </body>
</html>