Scribd Logo
Upload

Welcome to Scribd!

  • Form Validation

    Uploaded by

    RN261NitinVerma
    8 views10 pages
    The document is an assignment asking the student to validate input fields in a login form using JavaScript. It provides HTML and CSS code for a login form with fields for username, email, password, and confirm password. It then provides JavaScript code to validate that the username is between 4-15 characters, the email format is valid, the password is at least 6 characters, and the passwords match. The code uses classes to display validation error or success messages. The student is asked to run the validation functions and take a screenshot with their roll number displayed.

    Original Description:

    Original Title

    form-validation

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document is an assignment asking the student to validate input fields in a login form using JavaScript. It provides HTML and CSS code for a login form with fields for username, email, password, and confirm password. It then provides JavaScript code to validate that the username is between 4-15 characters, the email format is valid, the password is at least 6 characters, and the passwords match. The code uses classes to display validation error or success messages. The student is asked to run the validation functions and take a screenshot with their roll number displayed.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    8 views10 pages

    Form Validation

    Uploaded by

    RN261NitinVerma
    The document is an assignment asking the student to validate input fields in a login form using JavaScript. It provides HTML and CSS code for a login form with fields for username, email, password, and confirm password. It then provides JavaScript code to validate that the username is between 4-15 characters, the email format is valid, the password is at least 6 characters, and the passwords match. The code uses classes to display validation error or success messages. The student is asked to run the validation functions and take a screenshot with their roll number displayed.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 10

    Assignment

    Kunal Batra 2K18/CO/180

    Q. To continue the previous classwork example, you need to validate the


    other input fields using JavaScript. Email and Password fields cannot be
    empty and the password should match with the confirm password. Upload
    your output with the code. And yes on the screenshot your roll number
    must be there.

    Code :
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Login Form</title>
    <style>
    * {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }

    body {
    height: 100%;
    }

    .text-center {
    text-align: center;
    padding-top: 1rem;
    }
    .container {
    width: 85%;
    height: 100%;
    margin: 4em auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    position: relative;
    border: 0.5px grey solid;
    }
    #form .validation-fail {
    font-size: 0.6rem;
    margin: 0 0 0.2rem 0;
    color: red;
    }

    #form .validation-pass {
    display: none;
    }

    .container .left-div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    width: 50%;
    }

    .container .left-div h1 {
    margin: 1.5em;
    color: #000000;
    }

    .container .left-div input {


    width: 80%;
    padding: 0.3em;
    margin: 0.2em;
    border: none;
    border-bottom: 0.7px grey solid;
    }

    .container .left-div button {


    text-align: center;
    padding: 0.2em 1.7em;
    margin: 0.5em auto;
    margin-bottom: 2em;
    background-color: orangered;
    color: white;
    border: none;
    border-radius: 0.2em;
    }

    .container .btw-circle {
    position: absolute;
    background-color: #f7f306;
    color: rgb(28, 218, 22);
    border-radius: 50%;
    padding: 0.4em;
    left: 50%;
    top: 50%;
    border: black 0.4px solid;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    }
    .container .right-div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 50%;
    background-image: url("background.jpg");
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    }

    .container .right-div button {


    text-align: center;
    padding: 0.6em;
    margin: 0.7em auto;
    border: none;
    width: 80%;
    max-width: 160px;
    color: white;
    border-radius: 0.2em;
    }

    .container .right-div h1 {
    text-align: center;
    margin: 0.5em 0.5em;
    color: white;
    }

    .social-btn {
    cursor: pointer;
    }

    .container .right-div .b1 {


    background-color: #3b5998;
    }

    .container .right-div .b2 {


    background-color: #00acee;
    }

    .container .right-div .b3 {


    background-color: rgb(255, 0, 0);
    }

    @media (max-width: 580px) {


    .btw-circle {
    display: none;
    }
    }

    @media (max-width: 450px) {


    body {
    font-size: 12px;
    }
    .container {
    width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    border: none;
    margin-top: 1em;
    }
    .container .left-div {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
    border: 0.5px #97978f solid;
    border-top: none;
    }
    .container .left-div h1 {
    font-size: 2em;
    }
    .container .right-div h1 {
    font-size: 2em;
    }
    .container .right-div button {
    padding: 0.3em;
    font-size: 0.8rem;
    }
    .container .right-div .b3 {
    margin-bottom: 3em;
    }
    }
    </style>
    </head>
    <body>
    <section>
    <h1 class="text-center">Kunal Batra 2K18/CO/180</h1>
    <div class="container">
    <div id="form" class="left-div">
    <h1>Sign Up</h1>
    <input
    type="text"
    placeholder="Username"
    class="username"
    onblur="CheckUsername();"
    />
    <p class="validation-pass username-validation">
    Must be between 4-15 characters!
    </p>
    <input
    type="email"
    placeholder="E-mail"
    class="email"
    onblur="CheckEmail()"
    />
    <p class="validation-pass email-validation">Inavlid Email!</p>
    <input
    type="password"
    placeholder="Password"
    class="password"
    onblur="CheckPassword();"
    />
    <p class="validation-pass pass1-validation">
    Must be atleast 6 characters!
    </p>
    <input
    type="password"
    placeholder="Retype password"
    class="password"
    onblur="CheckPasswordMatch();"
    />
    <p class="validation-pass pass2-validation">Passwords dont
    match!</p>
    <br />
    <button onclick="RunAllValidation()">SIGN UP</button>
    </div>
    <div class="btw-circle"><h3>OR</h3></div>
    <div class="right-div">
    <h1>Sign in with social network</h1>
    <button class="social-btn b1">Log in with facebook</button>
    <button class="social-btn b2">Log in with Twitter</button>
    <button class="social-btn b3">Log in with Google+</button>
    </div>
    </div>
    </section>

    <script>
    const Form = document.getElementById("form");
    function CheckUsername() {
    const userName = Form.getElementsByClassName("username")[0].value;
    const userNameErrorBlock = Form.getElementsByClassName(
    "username-validation"
    )[0];
    if (userName.length < 4 || userName.length > 16) {
    userNameErrorBlock.classList.remove("validation-pass");
    userNameErrorBlock.classList.add("validation-fail");
    } else {
    userNameErrorBlock.classList.remove("validation-fail");
    userNameErrorBlock.classList.add("validation-pass");
    }
    }
    function validateEmail(email) {
    const re =

    /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]
    {1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{
    2,}))$/;
    return re.test(email);
    }
    function CheckEmail() {
    const Email = Form.getElementsByClassName("email")[0].value;

    const EmailErrorBlock =
    Form.getElementsByClassName("email-validation")[0];
    if (!validateEmail(Email)) {
    EmailErrorBlock.classList.remove("validation-pass");
    EmailErrorBlock.classList.add("validation-fail");
    } else {
    EmailErrorBlock.classList.remove("validation-fail");
    EmailErrorBlock.classList.add("validation-pass");
    }
    }

    function CheckPassword() {
    const pass = Form.getElementsByClassName("password")[0].value;

    const passErrorBlock =
    Form.getElementsByClassName("pass1-validation")[0];
    if (pass.length < 6) {
    passErrorBlock.classList.remove("validation-pass");
    passErrorBlock.classList.add("validation-fail");
    } else {
    passErrorBlock.classList.remove("validation-fail");
    passErrorBlock.classList.add("validation-pass");
    }
    }
    function CheckPasswordMatch() {
    const pass1 = Form.getElementsByClassName("password")[0].value;
    const pass2 = Form.getElementsByClassName("password")[1].value;
    const passErrorBlock =
    Form.getElementsByClassName("pass2-validation")[0];
    if (pass1 !== pass2) {
    passErrorBlock.classList.remove("validation-pass");
    passErrorBlock.classList.add("validation-fail");
    } else {
    passErrorBlock.classList.remove("validation-fail");
    passErrorBlock.classList.add("validation-pass");
    }
    }

    const validationFxns = [
    CheckUsername,
    CheckEmail,
    CheckPassword,
    CheckPasswordMatch,
    ];

    function RunAllValidation() {
    for (let fxn of validationFxns) {
    fxn();
    }
    }
    </script>
    </body>
    </html>

    Output :

    You might also like