57 |
58 |
59 |
60 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | const form = document.getElementById('form');
2 | const input = document.getElementById('username');
3 | const email = document.getElementById('email');
4 | const password = document.getElementById('password');
5 | const password2 = document.getElementById('password2');
6 |
7 | // Show input error message
8 | function showError(input, message) {
9 | const formControl = input.parentElement;
10 | formControl.className = 'form-control error';
11 | const small = formControl.querySelector('small');
12 | small.innerText = message;
13 | }
14 | // Show success outline
15 | function showSuccess(input) {
16 | const formControl = input.parentElement;
17 | formControl.className = 'form-control success';
18 | }
19 |
20 | // Check email is valid
21 | function checkEmail(input) {
22 | const re =
23 | /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
24 | if (re.test(input.value.trim())) {
25 | showSuccess(input);
26 | } else {
27 | showError(input, 'Email is not valid');
28 | }
29 | }
30 |
31 | // Check required fields
32 | function checkRequired(inputArr) {
33 | inputArr.forEach(function (input) {
34 | if (input.value.trim() === '') {
35 | showError(input, `${getFieldName(input)} is required`);
36 | } else {
37 | showSuccess(input);
38 | }
39 | });
40 | }
41 |
42 | // Check input length
43 | function checkLength(input, min, max) {
44 | if (input.value.length < min) {
45 | showError(
46 | input,
47 | `${getFieldName(input)} must be at least ${min} characters`
48 | );
49 | } else if (input.value.length > max) {
50 | showError(
51 | input,
52 | `${getFieldName(input)} must be less than ${max} characters`
53 | );
54 | } else {
55 | showSuccess(input);
56 | }
57 | }
58 |
59 | // Check password match
60 | function checkPasswordsMatch(input1, input2) {
61 | if (input1.value !== input2.value) {
62 | showError(input2, 'Passwords do not match');
63 | }
64 | }
65 |
66 | // Get fieldname
67 | function getFieldName(input) {
68 | return input.id.charAt(0).toUpperCase() + input.id.slice(1);
69 | }
70 |
71 | // Event Listeners
72 | form.addEventListener('submit', function (e) {
73 | e.preventDefault();
74 |
75 | checkRequired([username, email, password, password2]);
76 | checkLength(username, 3, 15);
77 | checkLength(password, 6, 25);
78 | checkEmail(email);
79 | checkPasswordsMatch(password, password2);
80 | });
81 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
2 |
3 | * {
4 | box-sizing: border-box;
5 | }
6 |
7 | :root {
8 | --light-gray: #f5f5f5;
9 | --white: #fff;
10 | --dark-gray: #333;
11 | --green: #2ecc71;
12 | --red: #e74c3c;
13 | --light-blue: #3498db;
14 | }
15 |
16 | body {
17 | background-color: var(--light-gray);
18 | font-family: 'Open Sans', sans-serif;
19 | display: flex;
20 | align-items: center;
21 | justify-content: center;
22 | min-height: 100vh;
23 | margin: 0;
24 | }
25 |
26 | .container {
27 | background-color: var(--white);
28 | border-radius: 5px;
29 | box-shadow: 0 20px 20px rgba(0, 0, 0, 0.3);
30 | width: 96%;
31 | max-width: 500px;
32 | }
33 |
34 | h2 {
35 | text-align: center;
36 | margin: 0 0 20px;
37 | }
38 |
39 | form {
40 | padding: 30px 40px;
41 | }
42 |
43 | .form-control {
44 | margin-bottom: 10px;
45 | padding-bottom: 20px;
46 | position: relative;
47 | }
48 |
49 | .form-control label {
50 | color: var(--dark-gray);
51 | display: block;
52 | margin-bottom: 5px;
53 | }
54 |
55 | .form-control input {
56 | border: 2px solid var(--light-gray);
57 | border-radius: 5px;
58 | display: block;
59 | width: 100%;
60 | padding: 10px;
61 | font-size: 14px;
62 | }
63 |
64 | .form-control input:focus {
65 | outline: 0;
66 | border-color: var(--dark-gray);
67 | }
68 |
69 | .form-control.success input {
70 | border-color: var(--green);
71 | }
72 |
73 | .form-control.error input {
74 | border-color: var(--red);
75 | }
76 |
77 | .form-control small {
78 | color: var(--red);
79 | position: absolute;
80 | bottom: 0;
81 | left: 0;
82 | visibility: hidden;
83 | }
84 |
85 | .form-control.error small {
86 | visibility: visible;
87 | }
88 |
89 | .form button {
90 | cursor: pointer;
91 | background-color: var(--light-blue);
92 | border: 2px solid var(--light-blue);
93 | border-radius: 2px;
94 | color: var(--white);
95 | display: block;
96 | font-size: 16px;
97 | padding: 10px;
98 | margin-top: 10px;
99 | width: 100%;
100 | }
101 |
--------------------------------------------------------------------------------
5 |