├── done.png ├── form.ico ├── avatar.png ├── README.md ├── page3.html ├── index.html ├── page1.css ├── styles_form.css ├── index.js └── page2.html /done.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rajkaste/Form-Validation/HEAD/done.png -------------------------------------------------------------------------------- /form.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rajkaste/Form-Validation/HEAD/form.ico -------------------------------------------------------------------------------- /avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rajkaste/Form-Validation/HEAD/avatar.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Form-Validation 2 | 3 | Published GitHub link of site: 4 | https://rajkaste.github.io/Form-Validation/ 5 | -------------------------------------------------------------------------------- /page3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Result 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |

Registration Done Successfully

14 |

Thanks for coming and Do visit again

15 | 16 |
17 | 18 |

Follow for more

19 | 20 | 21 | 22 |

© 2023 Raj Kaste.

23 |
24 | Done 25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Form Validation JS 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |
19 |

Welcome

20 |

Form Validation Using JavaScript

21 | 22 |
23 |
24 |
25 | 26 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /page1.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | padding: 0; 5 | margin: 0; 6 | box-sizing: border-box; 7 | } 8 | html{ 9 | overflow: hidden; 10 | } 11 | body { 12 | height: 100vh; 13 | background: linear-gradient(to right, #6e1fda, #27006a); 14 | font-family: "Space Grotesk", sans-serif; 15 | } 16 | 17 | .main-container { 18 | margin: 7.5% auto 3em; 19 | width: 72.5%; 20 | background-color: #170058; 21 | border-radius: 12px; 22 | box-shadow: 1px -3px 12px 7px #36007e; 23 | } 24 | .sub { 25 | display: flex; 26 | flex-direction: column; 27 | justify-content:center ; 28 | align-items: center; 29 | } 30 | .wel { 31 | margin-top: 1em; 32 | text-align: center; 33 | color: #2adcff; 34 | font-weight: 900; 35 | font-weight: bold; 36 | font-size: 50px; 37 | } 38 | 39 | .ready { 40 | margin-top: 20px; 41 | text-align: center; 42 | color: white; 43 | font-weight: 900; 44 | font-size: 20px; 45 | } 46 | 47 | .btn { 48 | margin-top: 2em; 49 | margin-bottom: 2em; 50 | padding: 13px 20px 13px 20px; 51 | border-radius: 38px; 52 | border-style: none; 53 | font-weight: 600; 54 | font-size: 15px; 55 | outline: none; 56 | background-color: #2adcff; 57 | color: white; 58 | } 59 | 60 | .btn:hover { 61 | cursor: pointer; 62 | background-color: white; 63 | color: #2adcff; 64 | } 65 | 66 | .bottom { 67 | text-align: center; 68 | font-size: 1rem; 69 | } 70 | 71 | a { 72 | color: black; 73 | } 74 | .fa-linkedin:hover { 75 | color: white; 76 | } 77 | .fa-github:hover { 78 | color: white; 79 | } 80 | .fa-youtube:hover { 81 | color: white; 82 | } 83 | .cp { 84 | color: white; 85 | } 86 | .fa { 87 | padding: 10px; 88 | font-size: 30px; 89 | width: 50px; 90 | text-align: center; 91 | text-decoration: none; 92 | } 93 | -------------------------------------------------------------------------------- /styles_form.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | padding: 0; 5 | margin: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | background: linear-gradient(to right, #6e1fda, #27006a); 11 | font-family: "Space Grotesk", sans-serif; 12 | } 13 | 14 | .main-container { 15 | margin: 55px auto; 16 | height: 500px; 17 | width: 820px; 18 | background-color: #170058; 19 | border-radius: 12px; 20 | box-shadow: 1px -3px 12px 7px #36007e; 21 | padding-top: 30px; 22 | } 23 | 24 | h1 { 25 | text-align: center; 26 | } 27 | 28 | h2 { 29 | padding-top: 10px; 30 | text-align: center; 31 | color: #2adcff; 32 | font-weight: 900; 33 | font-weight: bold; 34 | font-size: 50px; 35 | } 36 | 37 | .ready { 38 | margin-top: 20px; 39 | text-align: center; 40 | color: white; 41 | font-weight: 900; 42 | font-size: 20px; 43 | } 44 | 45 | .avatar { 46 | border-radius: 50%; 47 | height: 80px; 48 | top: 10px; 49 | left: calc(50% - 50px); 50 | } 51 | 52 | .done { 53 | width: 380px; 54 | height: 300px; 55 | position: absolute; 56 | bottom: 70px; 57 | right: 90px; 58 | } 59 | 60 | .rform { 61 | text-align: center; 62 | margin: 50px 400px; 63 | } 64 | 65 | .reg { 66 | display: flex; 67 | flex-direction: column; 68 | align-items: center; 69 | justify-content: space-between; 70 | width: 100%; 71 | height: 100%; 72 | padding-top: 12px; 73 | padding-bottom: 20px; 74 | background-color: #170058; 75 | border-radius: 12px; 76 | box-shadow: 1px -3px 12px 7px #36007e; 77 | } 78 | 79 | 80 | 81 | .button { 82 | width: 100%; 83 | padding: 10px; 84 | border-radius: 10px; 85 | } 86 | 87 | #ph { 88 | width: 100%; 89 | padding: 10px; 90 | border-radius: 10px; 91 | } 92 | 93 | #but { 94 | color: white; 95 | font-size: 18px; 96 | } 97 | 98 | #submit { 99 | width: 150px; 100 | padding: 10px; 101 | border-radius: 38px; 102 | border-style: none; 103 | font-family: inherit; 104 | font-weight: 900; 105 | font-size: 15px; 106 | outline: none; 107 | background-color: #2adcff; 108 | color: white; 109 | } 110 | 111 | #submit:hover { 112 | background-color: white; 113 | color: #2adcff; 114 | } 115 | 116 | .bottom { 117 | text-align: center; 118 | font-size: 1rem; 119 | } 120 | 121 | .handles { 122 | padding-top: 70px; 123 | text-align: center; 124 | font-size: 1rem; 125 | } 126 | 127 | #add { 128 | width: 550px; 129 | padding: 10px; 130 | border-radius: 5px; 131 | } 132 | 133 | a { 134 | color: black; 135 | } 136 | 137 | .fa-linkedin:hover, 138 | .fa-github:hover, 139 | .fa-youtube:hover, 140 | .cp { 141 | color: white; 142 | } 143 | 144 | .fa { 145 | padding: 10px; 146 | font-size: 30px; 147 | width: 50px; 148 | text-align: center; 149 | text-decoration: none; 150 | } 151 | 152 | input { 153 | border: none; 154 | box-shadow: none; 155 | font-family: inherit; 156 | } 157 | 158 | p:not(.cp) { 159 | /* margin: auto; */ 160 | text-align: left; 161 | } 162 | 163 | p { 164 | color: white; 165 | /* display: inline-block; */ 166 | } 167 | 168 | .input-details { 169 | display: flex; 170 | flex-direction: column; 171 | } 172 | 173 | .input-details div { 174 | margin-top: 30px; 175 | } 176 | 177 | textarea { 178 | width: 100%; 179 | border-radius: 10px; 180 | } -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | function validate() { 2 | var name = document.getElementById('fname'); 3 | var lname = document.getElementById('lname'); 4 | var email = document.getElementById('email'); 5 | var pass1 = document.getElementById('password'); 6 | var pass2 = document.getElementById('password2'); 7 | var phn = document.getElementById('phn'); 8 | var dob = document.getElementById('dob'); 9 | var bg = document.getElementById('bg'); 10 | var add = document.getElementById('add'); 11 | var hob = document.getElementById('hob'); 12 | var cb = document.getElementById('cb'); 13 | 14 | let countryCode = StudentRegistration.countryCode.selectedIndex; 15 | let eng = StudentRegistration.eng.selectedIndex; 16 | let flag=false; 17 | let str =" "; 18 | 19 | if (name.value === '' || name.value == null) { 20 | alert('First Name is required!'); 21 | return false; 22 | } 23 | if (lname.value === '' || lname.value == null) { 24 | alert('Last Name is required!'); 25 | return false; 26 | } 27 | 28 | if (pass1.value === '' || pass1.value == null) { 29 | alert('Password is required!'); 30 | return false; 31 | } 32 | if (pass2.value === '' || pass2.value == null) { 33 | alert('Confirm your Password!'); 34 | return false; 35 | } 36 | 37 | if (pass1.value != "" && pass1.value == pass2.value) { 38 | if (pass1.value.length < 6) { 39 | alert("Password must contain at least six characters!"); 40 | pass1.focus(); 41 | return false; 42 | } 43 | 44 | re = /[0-9]/; 45 | if (!re.test(pass1.value)) { 46 | alert("Password must contain at least one number!"); 47 | pass1.focus(); 48 | return false; 49 | } 50 | re = /[a-z]/; 51 | if (!re.test(pass1.value)) { 52 | alert("Password must contain at least one lowercase letter!"); 53 | pass1.focus(); 54 | return false; 55 | } 56 | re = /[A-Z]/; 57 | if (!re.test(pass1.value)) { 58 | alert("Password must contain at least one uppercase letter!"); 59 | pass1.focus(); 60 | return false; 61 | } 62 | } else { 63 | alert("Your Password do not Match!"); 64 | pass1.focus(); 65 | return false; 66 | } 67 | if (email.value === '' || email.value == null) { 68 | alert("Email-Id is required!"); 69 | return false; 70 | } 71 | var reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/; 72 | if (!reg.test(email.value)) { 73 | alert("You have entered an invalid email address!"); 74 | // return false; 75 | } 76 | 77 | if (phn.value === '' || phn.value == null) { 78 | alert("Mobile Number is required!"); 79 | return false; 80 | } 81 | var phnn = /^\d{10}$/; 82 | if (!phnn.test(phn.value)) { 83 | alert("Enter a valid Mobile Number of 10 Digits only!"); 84 | phn.focus(); 85 | return false; 86 | } 87 | if(countryCode==0) { 88 | flag=true; 89 | str +="Select your Country Code!!\n"; 90 | } 91 | if (dob.value === '' || dob.value == null) { 92 | alert('Date of Birth is required!'); 93 | return false; 94 | } 95 | if (StudentRegistration.gender[0].checked == false && StudentRegistration.gender[1].checked == false) 96 | { 97 | flag=true; 98 | str +="Select a Gender!!\n"; 99 | } 100 | if (bg.value === '' || bg.value == null) { 101 | alert('Blood Group is required!'); 102 | return false; 103 | } 104 | if (add.value === '' || add.value == null) { 105 | alert("Address is required!"); 106 | return false; 107 | } 108 | if (hob.value === '' || hob.value == null) { 109 | alert('Hobbies are required!'); 110 | return false; 111 | } 112 | if(eng==0) { 113 | flag=true; 114 | str +="Select your Branch!!"; 115 | } 116 | if(flag){ 117 | alert("Warning!!\n"+str); 118 | return false; 119 | } 120 | else{ 121 | return true; 122 | } 123 | } 124 | -------------------------------------------------------------------------------- /page2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Form Validation 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |
19 |
20 | profile 21 |

Registration Form

22 |
23 |
24 | 25 | 26 |
27 |

Enter Your First Name

28 | 29 |
30 |
31 |

Enter Your Last Name

32 | 33 |
34 |
35 |

Enter Your Password

36 | 37 |
38 |
39 | 40 |

Confirm Your Password

41 | 42 |
43 |
44 | 45 |

Enter Your Email-ID

46 | 47 |
48 |
49 | 50 |

Date of Birth

51 | 53 |
54 |
55 | 435 |
436 |
437 | 438 |

Enter Your Mobile Number

439 | 440 |
441 |
442 | 443 |

Enter your Address

444 | 445 |
446 |
447 | 448 |

Gender:

449 | Male 450 | Female 451 |
452 |
453 | 454 |
455 | 456 |
457 |

Hobbies:

458 | 459 |
460 |
461 |

Your Branch:

462 | 472 |
473 |
474 | 475 |

The above content belongs to me only.

476 |
477 |
478 | 479 | 480 |
481 |
482 |
483 |
484 |
485 | 494 | 495 | 496 | 497 | --------------------------------------------------------------------------------