CODEWITHSUNDEEP
htmlcss
newbiekoder
newbiekoder

Reputation: 21

How to add error message in html on button click

I intend to have the error message shown in red as displayed in the picture shown when login button is clicked. enter image description here

<!DOCTYPE html>
<html lang="en">
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <head>
        <title>Login V14</title>
        <form class="login100-form validate-form flex-sb flex-w" action="" method="post">
            <span class="login100-form-title p-b-32">
            Account Login
            </span>
            <span class="txt1 p-b-11">
            Username
            </span>
            <div class="wrap-input100 validate-input m-b-36" data-validate="Username is required">
                <input class="input100" type="text" name="username">
                <span class="focus-input100"></span>
            </div>
            <span class="txt1 p-b-11">
            Password
            </span>
            <div class="wrap-input100 validate-input m-b-12" data-validate="Password is required">
                <span class="btn-show-pass">
                <i class="fa fa-eye"></i>
                </span>
                <input class="input100" type="password" name="pass">
                <span class="focus-input100"></span>
            </div>
            <div class="flex-sb-m w-full p-b-48">
                <div class="contact100-form-checkbox">
                    <input class="input-checkbox100" id="ckb1" type="checkbox" name="remember-me">
                    <label class="label-checkbox100" for="ckb1">
                    Remember me
                    </label>
                </div>
            </div>
            <br><br>
            <div class="container-login100-form-btn">
                <button class="login100-form-btn" type="submit">
                Login
                </button>
            </div>
        </form>
        </div>
        </div>
        </div>
        <div id="dropDownSelect1"></div>
        </body>
</html>

Upvotes: 1

Views: 1010

Answers (1)

newbiekoder
newbiekoder

Reputation: 21

This solved it for me.

    $('#login100-form-btn').on('click', function (e) {
        let username = $('#usernameField').val();
        let password = $('#passwordField').val();
        if (username !== '' && password !== '') {
            e.preventDefault();
            $('.error_msg').removeClass('error_msg_hide');
            $('#usernameField').val('');
            $('#passwordField').val('');
        }
    });

    $('#usernameField').on('click', function () {
        $('.error_msg').addClass('error_msg_hide');
    });

    $('#usernameField').on('input', function () {
        $('.error_msg').addClass('error_msg_hide');
    });

    $('#passwordField').on('input', function () {
        $('.error_msg').addClass('error_msg_hide');
    });

    $('#passwordField').on('click', function () {
        $('.error_msg').addClass('error_msg_hide');
    });
})(jQuery);
   <div class="error_msg error_msg_hide">
                  <p>Form unavailable</p>
               </div>

Upvotes: 1

Related Questions