Untitled

avatar
unknown
plain_text
a year ago
3.2 kB
8
Indexable
<!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>

        <label for="">Surname</label><br>
        <input type="text" id="surName"> <br>

        <label for="" id="address">Address</label><br>
        <Textarea></Textarea> <br> <br>

        <label for="">Gender</label> <br>
        <label for="">Male</label>
        <input type="radio" id="gender">
        <label for="">Female</label>
        <input type="radio"> <br>
        <br>

        <label for="">Pincode</label> <br>
        <input type="text" id="pincode"><br>
        <span id="pinerror" class="error"></span>

        <label for="">city</label> <br>
        <input type="text" id="city">
        <br>

        <label for="">Education</label> <br>
        <input type="text" id="education"> <br>

        <label for="">Mobile No</label> <br>
        <input type="text" id="mobile">
        <span id="mobilerror" class="error"></span>
        <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>
    </form>
</div>
</center>
<script src="script.js"></script>
</body>
</html>

document.getElementById('registration').addEventListener('submit',function(event){
    let isValid = true;

    const name = document.getElementById('name').value;
    const surName = document.getElementById('surName').value;
    const address = document.getElementById('address').value;
    const gender = document.getElementById('gender').value;
    const pincode = document.getElementById('pincode').value;
    const city = document.getElementById('city').value;
    const education = document.getElementById('education').value;
    const mobile = document.getElementById('mobile').value;
    const mail = document.getElementById('mail').value;

    const password = document.getElementById('password').value;
    const passworderror = document.getElementById('passworderror');
    if(password.length < 8){
        passworderror.textContent = "Password must be contain 8 charachters.";
        isValid = false;
    }else {
        passworderror.textContent = "";
    }

    const confirmPass = document.getElementById('confirmPass').value;
    if(confirmPass !== password){
        confirmPasserror.textContent = "Password is not same as previous one";
        isValid = false;
    }else{
        confirmPasserror.textContent = "";
    }
});
Editor is loading...
Leave a Comment