Auto-validating-form/create-account.html at main · realbakari/Auto-validating-form · 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
<!DOCTYPE html>
<html>
<head>
    <title>Autovalidating form</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" href="assets/css/style.css" >
</head>
<body>
    <div class="wrapper">
        <form class="signup">
          <fieldset class="signup__field signup__field--name">
            <legend class="signup__field__header">Name</legend>
            <div class="signup__field__inputs">
              <input type="text" class="signup__field__inputs__input signup__field__inputs__input--name" data-field="name" placeholder="First" aria-label="First Name" />
              <input type="text" class="signup__field__inputs__input signup__field__inputs__input--name" data-field="name" placeholder="Last" aria-label="Last Name" />
            </div>
            <div class="signup__field__error"></div>
          </fieldset>
          <fieldset class="signup__field signup__field--username">
            <legend class="signup__field__header">Choose your username</legend>
            <div class="signup__field__inputs">
              <input type="text" class="signup__field__inputs__input signup__field__inputs__input--username" data-field="username" aria-label="Username" />
            </div>
            <div class="signup__field__error"></div>
          </fieldset>
          <fieldset class="signup__field signup__field--password">
            <legend class="signup__field__header">Create a password</legend>
            <div class="signup__field__inputs">
              <input type="password" class="signup__field__inputs__input signup__field__inputs__input--password" data-field="password" aria-label="Password" />
            </div>
            <div class="signup__field__guide signup__field__guide--password"></div>
            <div class="signup__field__error"></div>
          </fieldset>
          <fieldset class="signup__field signup__field--confirm-password">
            <legend class="signup__field__header">Confirm your password</legend>
            <div class="signup__field__inputs">
              <input type="password" class="signup__field__inputs__input signup__field__inputs__input--confirm-password" data-field="confirmPassword" aria-label="Confirm Password" />
            </div>
            <div class="signup__field__error"></div>
          </fieldset>
          <fieldset class="signup__field signup__field--birthday">
            <legend class="signup__field__header">Birthday</legend>
            <div class="signup__field__inputs">
              <div class="signup__field__inputs__input signup__field__inputs__selection signup__field__inputs__selection--month" data-field="month">Month</div>
              <input type="hidden" class="signup__field__inputs__input--birth-month" aria-label="Month"/>
              <input type="text" class="signup__field__inputs__input signup__field__inputs__input--birth-day" placeholder="Day" data-field="day" aria-label="Day" />
              <input type="text" class="signup__field__inputs__input signup__field__inputs__input--birth-year" placeholder="Year" data-field="year" aria-label="Year" />
            </div>
            <div class="signup__field__error"></div>
          </fieldset>
          <fieldset class="signup__field signup__field--phone">
            <legend class="signup__field__header">Mobile phone</legend>
            <div class="signup__field__inputs">
              <input type="text" class="signup__field__inputs__input signup__field__inputs__input--phone" data-field="phoneNumber" aria-label="Phone" />
            </div>
            <div class="signup__field__error"></div>
          </fieldset>
          <fieldset class="signup__field signup__field--current-email">
            <legend class="signup__field__header">Your current email address</legend>
            <div class="signup__field__inputs">
              <input type="text" class="signup__field__inputs__input signup__field__inputs__input--current-email" data-field="email" aria-label="Email" />
            </div>
            <div class="signup__field__error"></div>
          </fieldset>
        </form>
  </div>
</body>
<script type="text/javascript" src="assets/js/validate.js"></script>
</html>