remove the asterisk .... hasClass & removeClass JQuery Error

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>

_"...but I think I have a type error!"_ - Not a bold guess with that error message in the console: `SyntaxError: missing ) after argument list` — Andreas, May 12 '21 at 08:10
You cannot use the same quotes you're using as delimiter in a string without escaping them -> Typo — Andreas, May 12 '21 at 08:12
As @Andreas said, you can't use same quotes. Change one quotes. Ex: `$(this).after("*");` — Prakash M, May 12 '21 at 08:13
Does this answer your question? [When should I use double or single quotes in JavaScript?](https://stackoverflow.com/questions/242813/when-should-i-use-double-or-single-quotes-in-javascript) — freedomn-m, May 12 '21 at 08:20
@Andreas That's not Question, i had the error with the quotes when copying — Salichen, May 12 '21 at 08:27
So you have now re-written the complete code with the last edit. That's not how SO works... — Andreas, May 12 '21 at 08:46

score 1 · Answer 1 · answered May 12 '21 at 08:27

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>

remove the asterisk .... hasClass & removeClass JQuery Error

1 Answers1