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 confirm = document . getElementById ( "confirm" ) ;
6+ form . addEventListener ( "submit" , ( e ) => {
7+ e . preventDefault ( ) ;
8+ checkInputs ( ) ;
9+ } ) ;
10+ function checkInputs ( ) {
11+ // to prevent from spaces we use trim
12+ const usernamevalue = username . value . trim ( ) ;
13+ const emailvalue = email . value . trim ( ) ;
14+ const passwordvalue = password . value . trim ( ) ;
15+ const confirmvalue = confirm . value . trim ( ) ;
16+ if ( usernamevalue === '' ) {
17+ // add error class
18+ setError ( username , "This field cannot be blank !!!!!!" ) ;
19+
20+ }
21+ else {
22+ // add success class
23+ setSuccess ( username ) ;
24+
25+ }
26+ if ( emailvalue === '' ) {
27+ // add error class
28+ setError ( email , "This field cannot be blank !!!!!!" ) ;
29+
30+ }
31+ else if ( ! isemail ( emailvalue ) ) {
32+ setError ( email , "Check the email dude !!!!!!" ) ;
33+
34+
35+ }
36+ else {
37+ // add success class
38+ setSuccess ( email ) ;
39+
40+ }
41+ if ( passwordvalue === '' ) {
42+ // add error class
43+ setError ( password , "This field cannot be blank !!!!!!" ) ;
44+
45+ } else if ( passwordvalue . length <= 4 ) {
46+ setError ( password , "Password is too small!!" )
47+ }
48+ else {
49+ // add success class
50+ setSuccess ( password ) ;
51+
52+ }
53+ if ( confirmvalue === '' ) {
54+ // add error class
55+ setError ( confirm , "This field cannot be blank !!!!!!" ) ;
56+
57+ } else if ( passwordvalue !== confirmvalue ) {
58+ setError ( confirm , "Dude ! Password and Confirm Password must be same." )
59+ }
60+ else {
61+ // add success class
62+ setSuccess ( confirm ) ;
63+
64+ }
65+ }
66+
67+
68+ function setError ( input , msg ) {
69+ const formControl = input . parentElement ;
70+ const small = formControl . querySelector ( "small" ) ;
71+ small . innerText = msg ;
72+ // add error class
73+ formControl . className = "form-control error" ;
74+ }
75+ function setSuccess ( input ) {
76+ const formControl = input . parentElement ;
77+ formControl . className = "form-control success" ;
78+
79+ }
80+
81+ function isemail ( email ) {
82+ return / ^ ( ( [ ^ < > ( ) \[ \] \\ . , ; : \s @ " ] + ( \. [ ^ < > ( ) \[ \] \\ . , ; : \s @ " ] + ) * ) | ( " .+ " ) ) @ ( ( \[ [ 0 - 9 ] { 1 , 3 } \. [ 0 - 9 ] { 1 , 3 } \. [ 0 - 9 ] { 1 , 3 } \. [ 0 - 9 ] { 1 , 3 } ] ) | ( ( [ a - z A - Z \- 0 - 9 ] + \. ) + [ a - z A - Z ] { 2 , } ) ) $ / . test ( email ) ;
83+
84+ }
0 commit comments