删除星号.... hasClass & removeClass JQuery 错误

Question

I want to remove the class asterisk from the password field, but I think I have a type error. Can you please help me, I tried removing attributes but unfortunately that didn't work either, I don't want the eye icon and the asterisk together, because that's not beautiful and I want it to be required too Below is the code HTML, JS, CSS

 var passField = $('.password'); $('.show-pass').hover(function() { passField.attr('type', 'text'); }, function() { passField.attr('type', 'password'); }); // Add Asterisk on Required Field // else if($(this).hasClass('password').removeClass('asterisk')); $('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/bootstrap@5.0.0/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="Benutzername zum Anmelden" required> <label>Benutzername</label> </div> <div class="form-floating password"> <input type="password" name="password" class="password form-control" placeholder="******" required> <label>Passwort</label> <i class="fas fa-eye show-pass"></i> </div> <div> <input type="submit" class="sbxBgPrimary w-100 btn btn-lg btn-primary" value="Anmelden"> </div>

Answer 1

In your check of which inputs to add the asterisk to, you can exclude password inputs:

$('input:not(.password)').each(

You also don't need the loop as jquery will apply to all elements in the collection, giving:

$('input[required]:not(.password)').after('<span class="asterisk">*</span>');

Updated snippet:

 var passField = $('.password'); $('.show-pass').hover(function() { passField.attr('type', 'text'); }, function() { passField.attr('type', 'password'); }); // Add Asterisk on Required Field $('input[required]:not(.password)').after('<span class="asterisk">*</span>');

 .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/bootstrap@5.0.0/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"> <br/><br/> <div class="form-floating"> <input type="username" name="username" class="form-control" placeholder="Benutzername zum Anmelden" required> <label>Benutzername</label> </div> <div class="form-floating password"> <input type="password" name="password" class="password form-control" placeholder="******" required> <label>Passwort</label> <i class="fas fa-eye show-pass"></i> </div> <div> <input type="submit" class="sbxBgPrimary w-100 btn btn-lg btn-primary" value="Anmelden"> </div>