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