Help needed! I'm trying to remove the asterisk class from the password field, but there seems to be a typo in my code. Can someone assist me with this issue? I've attempted to remove attributes, but that hasn't been successful either. I don't want both the eye icon and the asterisk displayed together as it doesn't look good, but the password field should still be required. Here is the HTML, JS, CSS code snippet:
var passField = $('.password');
$('.show-pass').hover(function() {
passField.attr('type', 'text');
}, function() {
passField.attr('type', 'password');
});
// Add Asterisk on Required Field
$('input').each(function() {
if($(this).attr('required') === 'required') {
$(this).after('<span class="asterisk">*</span>');
} else if ($(this).hasClass('password')) {
$(this).removeAttr('span.asterisk');
}
});.show-pass {
position: absolute;
top: 20px;
right: 15px;
cursor: pointer;
}
.asterisk {
font-size: 30px;
position: absolute;
right: 20px;
top: 14px;
color: #00704a;
}
.form-signin {
width: 100%;
max-width: 400px;
padding: 15px;
margin: auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-floating:focus-within {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c8aaa7a7bcbbbcbaa9b888fde6f8e6f8">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<form class="login mt-0" action="<?php echo $_SERVER['PHP_SELF'] ?>" method="POST">
<div class="form-floating">
<input type="username" name="username" class="form-control" placeholder="Username for Login" required>
<label>Username</label>
</div>
<div class="form-floating password">
<input type="password" name="password" class="password form-control" placeholder="******" required>
<label>Password</label>
<i class="fas fa-eye show-pass"></i>
</div>
<div>
<input type="submit" class="sbxBgPrimary w-100 btn btn-lg btn-primary" value="Login">
</div>