jQuery doesn't want add class without point

Question

jQuery doesn't want add class without point.

Here's the html markup:

<div class="form-group" id="plis">
    <select class="form-control-input notEmpty" aria-label="Default select example">
      <option selected>Choisissez</option>
      <option value="1">1 km</option>
      <option value="2">2 km</option>
      <option value="3">5 km</option>
      <option value="3">10 km</option>
      <option value="3">20km</option>
    </select>
    <label class="label-control" for="spassword">Carburant</label>
    <div class="help-block with-errors" id="distance"></div>
</div>

I want to transform this :

<div class="form-group" id="plis">...

To this :

<div class="form-group has-error has-danger" id="plis">...

First attempt with this jQuery code:

$( "select" ).change(function() {
    if ($(this).val() == 'Choisissez') {
        $('div#plis').addClass('.has-error has-danger');
        $("div#distance").append("<ul class='list-unstyled' style='margin-top: 0.375rem;'><li>Its works</li></ul>");
    }
});

The result :

<div class="form-group .has-error" id="plis">...

Where is the "has-danger" ?

---

Second attempt:

$( "select" ).change(function() {
    if ($(this).val() == 'Choisissez') {
        $('div#plis').addClass('has-error has-danger');
        $("div#distance").append("<ul class='list-unstyled' style='margin-top: 0.375rem;'><li>Its works</li></ul>");
    }
});

The result :

<div class="form-group" id="plis">...

Why did nothing happen ?

---

Third attempt:

$( "select" ).change(function() {
    if ($(this).val() == 'Choisissez') {
        $('div#plis').addClass('has-error .has-danger');
        $("div#distance").append("<ul class='list-unstyled' style='margin-top: 0.375rem;'><li>Its works</li></ul>");
    }
});

The result :

<div class="form-group .has-danger" id="plis">...

Where is the "has-error" ?

---

Fourth attempt:

$( "select" ).change(function() {
    if ($(this).val() == 'Choisissez') {
        $('div#plis').addClass('.has-error .has-danger');
        $("div#distance").append("<ul class='list-unstyled' style='margin-top: 0.375rem;'><li>Its works</li></ul>");
    }
});

The result :

<div class="form-group .has-error .has-danger" id="plis">...

Why doesn't jQuery add the class without a point?

How can I do it?

Thanks a lot

Answer 1

it works if you just make that addClass('has-error has-danger') (i.e. no dots, classes seperated by space):

$("select").change(function() {
  if ($(this).val() == 'Choisissez') {
    $('div#plis').addClass('has-error has-danger');
    $("div#distance").append("<ul class='list-unstyled' style='margin-top: 0.375rem;'><li>It works</li></ul>");
  }
});

.has-error {
  border: 3px solid red;
}
.has-danger {
  background: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group" id="plis">
  <select class="form-control-input notEmpty" aria-label="Default select example">
    <option selected>Choisissez</option>
    <option value="1">1 km</option>
    <option value="2">2 km</option>
    <option value="3">5 km</option>
    <option value="3">10 km</option>
    <option value="3">20km</option>
  </select>
  <label class="label-control" for="spassword">Carburant</label>
  <div class="help-block with-errors" id="distance"></div>
</div>

Answer 2

From the jQuery documentation of addClass, you only add the class names you want to add, separated by a space. You don't need to specify the "dot" as it's a class selector.

$('div#plis').addClass('has-error has-danger');

I know you tried your second example and you say it didn't work but as you can see by the snippet below, it does indeed work. I added the red color to only elements that have the classes has-error and has-danger.

Bare in mind, this only works if you select an option, then select Choisissez again. This is because the event listener you've created is only fired on change.

$( "select" ).change(function() {
        if ($(this).val() == 'Choisissez') {
            $('div#plis').addClass('has-error has-danger');
            $("div#distance").append("<ul class='list-unstyled' style='margin-top: 0.375rem;'><li>Its works</li></ul>");
        }
    })

.has-error.has-danger {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group" id="plis">
    <select class="form-control-input notEmpty" aria-label="Default select example">
      <option selected>Choisissez</option>
      <option value="1">1 km</option>
      <option value="2">2 km</option>
      <option value="3">5 km</option>
      <option value="3">10 km</option>
      <option value="3">20km</option>
    </select>
    <label class="label-control" for="spassword">Carburant</label>
    <div class="help-block with-errors" id="distance"></div>
</div>