Reputation: 21
I intend to have the error message shown in red as displayed in the picture shown when login button is clicked.
<!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
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