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';
    }
});
Editor is loading...