diff --git a/app.js b/app.js index e60691b..7f19a0f 100644 --- a/app.js +++ b/app.js @@ -1 +1,102 @@ -/* Fill your code*/ +const pattern = { + username: /^[a-z\d]{8,15}$/i, + email: /^([a-z\d\.-]+)@([a-z\d-]+)\.([a-z]{2,8})(\.[a-z]{2,8})?$/, + password: /^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*()]).{8,20}$/, + phone:/^\d{10}$/, +} + +function formValidate(){ + + let name = document.forms["RegForm"]["Name"]; + let nameInput = document.getElementById("name"); + if(pattern.username.test(name.value)){ + nameInput.textContent=""; + } + else{ + nameInput.textContent="Atleast 8 to 15 Character Required"; + name.focus(); + return false; + } + + + let address = document.forms["RegForm"]["Address"]; + let addressInput = document.getElementById("address"); + if(address.value==""){ + addressInput.textContent="Address cannot be empty. Kindly fill "; + address.focus(); + return false; + } + else{ + addressInput.textContent=""; + } + + + let email = document.forms["RegForm"]["EMail"]; + let emailInput = document.getElementById("email"); + if(email.value==""){ + emailInput.textContent="Email cannot be empty. Kindly fill "; + email.focus(); + return false; + } + else if(pattern.email.test(email.value)){ + emailInput.textContent=""; + } + else{ + emailInput.textContent="Enter a vaild Email"; + email.focus(); + return false; + } + + + let password = document.forms["RegForm"]["Password"]; + let passwordInput = document.getElementById("pwd"); + if(password.value==""){ + passwordInput.textContent="Kindly fill the Password"; + password.focus(); + return false; + } + else if(pattern.password.test(password.value)){ + passwordInput.textContent=""; + } + else{ + passwordInput.textContent="password must contain 1 uppercase letter, 1 lowercase letter, atleast 1 number any Symbols"; + password.focus(); + return false; + } + + + let cpassword = document.forms["RegForm"]["cPassword"]; + let cpasswordInput = document.getElementById("cpwd"); + if(cpassword.value==""){ + cpasswordInput.textContent="Kindly confirm your password"; + cpassword.focus(); + return false; + } + else if(cpassword.value==password.value){ + cpasswordInput.textContent=""; + }else{ + cpasswordInput.textContent="Password and confirm password must be same"; + cpassword.focus(); + return false; + } + + + let phone = document.forms["RegForm"]["phone"]; + let phoneInput = document.getElementById("phone"); + let result = document.getElementById("result"); + if(phone.value==""){ + phoneInput.textContent="Kindly fill the phone number"; + phone.focus(); + return false; + } + else if(pattern.phone.test(phone.value)){ + phoneInput.textContent=""; + result.textContent="Regex validation Success"; + return false; + } + else{ + phoneInputs.textContent="Enter a valid 10 digit number"; + phone.focus(); + return false; + } +} \ No newline at end of file diff --git a/index.html b/index.html index 1042792..cc938a1 100644 --- a/index.html +++ b/index.html @@ -8,27 +8,42 @@

FORM VALIDATION

-
-

Name :

-
+ + + + +
+ -

Address :

-
+ + +
+ -

E-mail :

-
+ + +
+ -

Password :

-

+ + +
+ -

Confirm Password :

-

- -

Phone :

-

- -


+ + +
+ + + +
+ + +
+ +

Name :

Address :

E-mail :

Password :

Confirm Password :

Phone :

+

\ No newline at end of file diff --git a/style.css b/style.css index 5163fc9..38e913c 100644 --- a/style.css +++ b/style.css @@ -7,8 +7,10 @@ div { form { margin: 0 auto; - width: 600px; + padding-top:2%; + width: 1200px; text-align: center; + padding-top: 0%; border: 1px Solid black; background-color: aliceblue; } @@ -16,14 +18,58 @@ form { form>p{ display: flex; flex-direction: row; - justify-content: center; + justify-content: flex-start; + padding-left: 120px; } + input{ - width: 300px; - margin-left: 2%; + width: 350px; + /* margin-left: 2%; */ float: inline-end; } +.name{ + margin-left: 20%; +} +.address{ + margin-left: 18.75%; +} +.mail{ + margin-left: 19.5%; +} +.password{ + margin-left: 18%; +} +.cpassword{ + margin-left: 10.75%; +} +.phone{ + margin-left: 20%; +} +#result{ + color: green; + font-weight: bold; + font-size: 20px; + text-align: center; + margin-left: 23%; +} +.btn{ + margin-left: 33%; + height: 35px; + width: 175px; + font-size: larger; + font-weight: bold; + color: white; + background-color: orangered; +} .alert{ color: red; +} +table{ + width: 100%; + border-spacing: 0 25px; +} +td{ + padding: 10px; + text-align: center; } \ No newline at end of file