formvalidation.html

<!-- client side validation
    server side validation-->


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>form validatior</title>
        <style>
            body{
                background-color: #3498db;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;

            }
            #form-container{
                background-color: white;
                padding: 30px;
                text-align: center;
                width: 400px;
            }
            input{
                margin: 10px;
                padding: 10px;
                height: 20px;
                text-align: center;
                font-size: 20px;
                width: 200px;
            }
            input[type="submit"]{
                text-align: center;
                font-size: 10px;
                height: 30px;
                /* width: 200px; */
            }
            .error{
                color :red;
                text-align: left;
            }
        </style>
    </head>
    <body>
        <div id="form-container">
            <h2>login</h2>
            <form action="" onsubmit="return formsubmit()">
                <input type="text" placeholder="username" id="usname"> <br>
                <p class="error">user error</p >
                <input type="password" placeholder="password" id="pwd"> <br>
                <p class="error">password error</p>
                <input type="submit" value="submit">
        </div>
        <script>
            let username = document.getElementById("usname");
            let password = document.getElementById("pwd");
            function formsubmit() {
                if (username.value == "") {
                    console.log("username empty");
                   let classes= document.getElementsByClassName("error");
                    for (let elm of classes) {
                        elm.innerHTML="fill correctly";
                    }
                }
            }
        </script>
    </body>
    </html>