javascript-projects/form-validation/index.html at main · tinawebdev/javascript-projects · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form Validation</title>
  <link rel="icon" href="https://www.google.com/s2/u/0/favicons?domain=css-tricks.com" type="image/png">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>Sign Up Today!</h1>
    <!-- Form -->
    <form id="form">
      <!-- Full Name -->
      <div class="form-group">
        <label for="name">Full Name</label>
        <input type="text"
               id="name"
               placeholder="Full Name"
               name="name"
               minlength="3"
               maxlength="100"
               required
        >
      </div>
      <!-- Phone Number -->
      <div class="form-group">
        <label for="phone">Phone Number</label>
        <input type="tel"
               id="phone"
               placeholder="555-555-5555"
               name="phone"
               required pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
        >
      </div>
      <!-- Email Adress -->
      <div class="form-group">
        <label for="email">Email Adress</label>
        <input type="email"
               id="email"
               placeholder="email@adress.com"
               name="email"
               required
        >
      </div>
      <!-- Website URL -->
      <div class="form-group">
        <label for="website">Website URL</label>
        <input type="url"
               id="website"
               placeholder="http://google.com"
               name="website"
               required
        >
      </div>
      <!-- Password -->
      <div class="form-group">
        <label for="password1">Password</label>
        <input type="password"
               id="password1"
               placeholder="Create Password (Min. 8 characters)"
               required pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$"
               title="Please include at least 1 uppercase character, 1 lowercase character, and 1 number."
        >
      </div>
      <!-- Confirm Password -->
      <div class="form-group">
        <label for="password2">Confirm Password</label>
        <input type="password"
               id="password2"
               placeholder="Confirm Password"
               name="password"
               required pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$"
        >
      </div>
      <button type="submit">Register</button>
    </form>
    <!-- Error/Success Message -->
    <div class="message-container">
      <h3 id="message">Don't Hesitate!</h3>
    </div>
  </div>
  <!-- Script -->
  <script src="script.js"></script>
</body>
</html>