diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..22dd67d --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,5 @@ +{ + "editor.fontFamily": "Consolas", + "breadcrumbs.showProperties": false, + "breadcrumbs.showNull": false +} \ No newline at end of file diff --git a/app.js b/app.js index e60691b..05903dc 100644 --- a/app.js +++ b/app.js @@ -1 +1,92 @@ -/* Fill your code*/ +function formValidate(){ +var name = document.forms["RegForm"]["Name"]; +var address = document.forms["RegForm"]["Address"]; +var email = document.forms["RegForm"]["EMail"]; +var password = document.forms["RegForm"]["Password"]; +var cpassword = document.forms["RegForm"]["cPassword"]; +var phone= document.forms["RegForm"]["phone"]; + + +errname = document.getElementById("name"); +erraddress = document.getElementById("address"); +erremail = document.getElementById('email'); +errpassword = document.getElementById("pwd"); +errcpassword = document.getElementById("cpwd"); +errphone = document.getElementById("phone"); + +if (name.value.length<3){ + errname.innerText = "Name field should have atleast 8 to 15 Characteres"; + name.focus(); + return false; +} + else { + errname.innerText = ""; +} + +if (address.value == ""){ + erraddress.innerText = "Address field should not be Empty"; + address.focus(); + return false; +} +else { + erraddress.innerText =""; +} +if (email.value == ""){ + erremail.innerText = "Email should not be empty"; + email.focus(); + return false; +} +else if(/^[a-z0-9+_.-?&^"':]+@[a-z0-9.-]+$/i.test(email.value)){ + erremail.innerText = ""; +} +else { + errname.innerText = "Email is invalid"; + email.focus(); + return false; +} + +if (password.value == "") +{ + errpassword.innerText = "Password field should not be empty"; + password.focus(); + return false; +} +else if(password.value.match(/^(?=.*\d)(?=.*[!@#$%^&*])(?=.*[a-z])(?=.*[A-Z]).{8,}$/)){ + errpassword.innerText = ""; +} +else{ + errpassword.innerText = "Password should have minimum of 8 characters"; + password.focus(); + return false; +} +if (cpassword.value == "") +{ + errcpassword.innerText = "Password field should not be empty"; + cpassword.focus(); + return false; +} +else if(cpassword.value.match(/^(?=.*\d)(?=.*[!@#$%^&*])(?=.*[a-z])(?=.*[A-Z]).{8,}$/) && cpassword.value === password.value){ + errcpassword.innerText = ""; +} +else{ + errcpassword.innerText = "Password not match"; + cpassword.focus(); + return false; +} +if(phone.value == ""){ + errphone.innerText = "Kindly type your mobile number"; + phone.focus(); + return false; +} +else if (/^[0-9]{10}$/.test(phone.value)){ + errphone.innerText = ""; +} +else{ + errphone.innerText = "Invalid Mobile Number"; + phone.focus(); + return false; +} + + + + } \ No newline at end of file diff --git a/assets/ok.png b/assets/ok.png new file mode 100644 index 0000000..6d6bb67 Binary files /dev/null and b/assets/ok.png differ diff --git a/index.html b/index.html index 1042792..348f827 100644 --- a/index.html +++ b/index.html @@ -8,26 +8,20 @@

FORM VALIDATION

-
-

Name :

-
+ +

Name :


-

Address :

-
+

Address :


-

E-mail :

-
+

E-mail :


-

Password :

-

+

Password :


-

Confirm Password :

-

+

Confirm
Password :


-

Phone :

-

+

Phone :


-


+


diff --git a/result.html b/result.html new file mode 100644 index 0000000..96afa7f --- /dev/null +++ b/result.html @@ -0,0 +1,37 @@ + + + + + + + Validation + + + +
+

Thank you. Your form is submitted successfully!!!

+ + + +
+ + + \ No newline at end of file diff --git a/style.css b/style.css index 5163fc9..7f810a4 100644 --- a/style.css +++ b/style.css @@ -1,4 +1,4 @@ - + div { box-sizing: border-box; width: 100%; @@ -17,13 +17,25 @@ form>p{ display: flex; flex-direction: row; justify-content: center; - + } input{ - width: 300px; + width:auto; + height:30px; margin-left: 2%; float: inline-end; + border-radius:4px; + border:1px solid black; + } .alert{ color: red; +} +#submit{ + background-color: rgb(190, 149, 72); + width:150px; + height:30px; + border:2px solid black; + border-radius:10px; + font-weight: bolder; } \ No newline at end of file