├── app.js
├── index.html
└── style.css
/app.js:
--------------------------------------------------------------------------------
1 | const form = document.querySelector('#form')
2 | const username = document.querySelector('#username')
3 | const email = document.querySelector('#email')
4 | const password = document.querySelector('#password')
5 | const cpassword = document.querySelector('#cpassword')
6 | form.addEventListener('submit',(e)=>{
7 |
8 | if(!validateInputs())
9 | {
10 | e.preventDefault()
11 | }
12 | })
13 |
14 | function validateInputs()
15 | {
16 | const usernameVal = username.value.trim()
17 | const emailVal = email.value.trim()
18 | const passwordVal = password.value.trim()
19 | const cpasswordVal = cpassword.value.trim()
20 | let success = true
21 |
22 | if(usernameVal === '')
23 | {
24 | success = false
25 | setError(username,'Username is required')
26 |
27 | }
28 | else{
29 | setSuccess(username)
30 | }
31 |
32 | if(emailVal === '')
33 | {
34 | success = false
35 | setError(email,'Email is required')
36 |
37 | }
38 | else if(!validateEmail(emailVal))
39 | {
40 | success = false
41 | setError(email,'Please enter a valid email')
42 |
43 | }
44 | else
45 | {
46 | setSuccess(email)
47 | }
48 |
49 | if(passwordVal === '')
50 | {
51 | success = false
52 | setError(password,'Password is required')
53 |
54 | }
55 | else if(passwordVal.length<8)
56 | {
57 | success = false
58 | setError(password,'Password must be atleast 8 characters long')
59 |
60 | }
61 | else{
62 | setSuccess(password)
63 | }
64 |
65 | if(cpasswordVal === '')
66 | {
67 | success = false
68 | setError(cpassword,'Confirm password is required')
69 |
70 | }
71 | else if(cpasswordVal!==passwordVal)
72 | {
73 | success = false
74 | setError(cpassword,'Password does not match')
75 |
76 | }
77 | else{
78 | setSuccess(cpassword)
79 | }
80 | return success
81 |
82 |
83 | }
84 |
85 | function setError(element,message){
86 | const inputGroup = element.parentElement;
87 | const errorElement = inputGroup.querySelector('.error')
88 | errorElement.innerText = message;
89 | inputGroup.classList.add('error')
90 | inputGroup.classList.remove('success')
91 | }
92 |
93 | function setSuccess(element){
94 | const inputGroup = element.parentElement;
95 | const errorElement = inputGroup.querySelector('.error')
96 | errorElement.innerText = ''
97 | inputGroup.classList.add('success')
98 | inputGroup.classList.remove('error')
99 | }
100 |
101 | const validateEmail = (email) => {
102 | return String(email)
103 | .toLowerCase()
104 | .match(
105 | /^(([^<>()[\]\\.,;:\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,}))$/)
106 | }
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Register
7 |
8 |
9 |
10 |
11 |
37 |
38 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | body{
2 | margin: 0;
3 | padding: 0;
4 | background: rgb(34,193,195);
5 | background: linear-gradient(0deg, rgba(34,193,195,1) 42%, rgba(115,93,234,1) 85%, rgba(155,45,253,1) 100%);
6 | background-attachment: fixed;
7 | font-family: Georgia, 'Times New Roman', Times, serif;
8 | }
9 | #form{
10 | width: 400px;
11 | margin: 10vh auto 0 auto;
12 | background-color: whitesmoke;
13 | border-radius: 5px;
14 | padding: 30px;
15 | height: 75vh;
16 | }
17 | h1{
18 | text-align: center;
19 | color:#792099;
20 | }
21 | #form button{
22 | background-color: #792099;
23 | color: white;
24 | border: 2px solid #792099;
25 | padding: 8px;
26 | margin:20px 0px;
27 | border-radius: 5px;
28 | cursor: pointer;
29 | font-size: 1em;
30 | width: 100%;
31 | }
32 | .input-group{
33 | display: flex;
34 | flex-direction: column;
35 | margin-bottom: 15px;
36 |
37 | }
38 |
39 | .input-group input{
40 | border: 5px;
41 | margin-top: 5px;
42 | font-size: 1em;
43 | padding: 8px;
44 | border:2px solid #792099;
45 | }
46 | .input-group input:focus{
47 | outline: 0;
48 | }
49 | .input-group .error{
50 | color: red;
51 | font-size: 14px;
52 | margin-top: 10px;
53 | }
54 | .input-group label{
55 | font-size: 1.2em;
56 | }
57 | .input-group.success input{
58 | border-color: green;
59 | }
60 | .input-group.error input{
61 | border-color: red;
62 | }
63 |
--------------------------------------------------------------------------------