Untitled
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Form Validation</title> </head> <body> <center> <div class="form"> <h1>From Validation</h1> <form id="registration"> <label for="">Name</label> <br> <input type="text" id="name"> <br> <span id="namerror"></span> <label for="">Surname</label><br> <input type="text" id="surName"> <br> <span id="surnamerror"></span> <label for="" id="address">Address</label><br> <Textarea></Textarea> <br> <br> <span id="addresserror"></span> <label for="">Gender</label> <br> <span id="genderror"></span> <label for="">Male</label> <input type="radio" id="Mgender"> <label for="">Female</label> <input type="radio" id="Fgender"> <br> <br> <label for="">Pincode</label> <br> <input type="text" id="pincode"><br> <span id="pinerror" class="error"></span> <br> <label for="city">City</label> <br> <select name="" id="city"> <br> <option>Select</option> <option>Navsari</option> <option>Surat</option> <option>Valsad</option> <option>Vapi</option> <option>Vadodra</option> </select> <br> <br> <label for="">Mobile No</label> <br> <input type="text" id="mobile"> <span id="mobilerror" class="error"></span> <br> <br> <label for="">Education</label> <br> <label for="">10th</label><input type="checkbox" id="checkbox1"> <span id="checkbox1error"></span> <label for="">12th</label><input type="checkbox" id="checkbox2"> <span id="checkbox2error"></span> <label for="">Graduation</label><input type="checkbox"> <br> <br> <label for="">Email</label> <br> <input type="text" id="mail"> <br> <span id="mailerror" class="error"></span> <label for="">Password</label> <br> <input type="text" id="password"> <br> <span id="passworderror" class="error"></span> <label for="">Confirm Password</label> <br> <input type="text" id="confirmPass"> <br> <span id="confirmPasserror" class="error"></span> <button type="submit">Submit</button> <br> <br> <button type="reset" value="Reset">Reset</button> </form> </div> </center> <script src="script.js"></script> </body> </html> document.getElementById('registration').addEventListener('submit', function (event) { event.preventDefault(); let isValid = true; const name = document.getElementById('name').value; const namerror = document.getElementById('namerror'); const surName = document.getElementById('surName').value; const surnamerror = document.getElementById('surnamerror'); const address = document.getElementById('address').value; const addresserror = document.getElementById('addresserror').value; const Fgender = document.getElementById('Fgender').value; const Mgender = document.getElementById('Mgender').value; const genderror = document.getElementById('genderror').value; const email = document.getElementById('mail').value.trim(); const password = document.getElementById('password').value; const confirmPass = document.getElementById('confirmPass').value; const mailerror = document.getElementById('mailerror'); const passworderror = document.getElementById('passworderror'); const confirmPasserror = document.getElementById('confirmPasserror'); const pincode = document.getElementById('pincode').value; const pinerror = document.getElementById('pinerror'); const mobile = document.getElementById('mobile').value; const mobilerror = document.getElementById('mobilerror'); const checkbox1 = document.getElementById('checkbox1').checked; const checkbox1error = document.getElementById('checkbox1error'); const checkbox2 = document.getElementById('checkbox2').checked; const checkbox2error = document.getElementById('checkbox2error'); if(name === ""){ namerror.textContent = "Please enter name"; isValid = false; }else{ namerror.textContent = ""; } if(surName === ""){ surName.textContent = "Please enter Surname"; isValid = false; }else{ surnamerror.textContent = ""; } if(surName === ""){ surnamerror.textContent = "Please enter Surname"; isValid = false; }else{ surnamerror.textContent = ""; } if(address === ""){ addresserror.textContent = "Please enter address"; isValid = false; }else{ addresserror.textContent = ""; } if(!checkbox1 || !checkbox2){ alert("please select checkbox"); isValid = false; } if (!email.includes('@')) { mailerror.textContent = "Email must contain '@'."; isValid = false; } else { mailerror.textContent = ""; } if(pincode.length < 6){ pinerror.textContent = "Please enter 6 digit pin"; isValid = false; }else{ pinerror.textContent = ""; } if(mobile.length <= 10){ mobilerror.textContent = "Please enter 10 digit Mobile.No"; isValid = false; }else{ mobilerror.textContent = ""; } if (password.length < 8) { passworderror.textContent = "Password must contain at least 8 characters and special characters."; isValid = false; } else { passworderror.textContent = ""; } const check = ['(?=.*[@$!%*?&])']; if (confirmPass !== password) { confirmPasserror.textContent = "Passwords do not match."; isValid = false; } else { confirmPasserror.textContent = ""; } if (isValid) { localStorage.setItem('userName', name); window.location.href = 'thank.html'; } });
Leave a Comment