jQuery addClass在表单元素上不起作用

Question

Here's my example tr:

<tr>
  <td><input type="text" class="ingredient required" name="ingredient"></td>
  <td><input type="number" class="amount required" name="amount" ></td>
  <td><input type="number" class="carrier required" name="carrier" max="100"></td>
  <td><input type="number" class="kilo required" name="kilo"></td>
  <td><select class="tableDropDown" style="min-width: 100px;">
           <option value="other">The Manufacturer</option>
           <option value="me">Me</option>
      </select></td>
  <td><input class="packSize" type="number" disabled></td>
</tr>
<button type="submit" class="analyze">Analyze</button>

I want it so that when the select value (.tableDropDown) is "me", .packSize has the class .required added on to it, because I use the presence of .required for form validation.

I'm trying to use this with the addClass method in jquery but it's not working.

This is what my code looks like:

 $(".tableDropDown").on('change', function () {
    var packSize = $(this).parents('.formulaRow').find('.packSize');
    if ($(this).val() === "me") {
        $(packSize).prop('disabled', false);
        $(packSize).addClass(".required");
    } else {
        $(packSize).prop('disabled', true);
        $(packSize).parents('td').removeClass("redClass");
    }
    if ($(this).val() === "me" && $(packSize).val() === "") {
        $(packSize).parents("td").addClass("redClass");
    }
});

The function that's being used for the validation is this:

$(".analyze").click(function() {
var counter = 0;
$(".required").each(function() {
    if ($(this).val() === "") {
        $(this).parents("td").addClass("redClass");
        counter++;
    }
});

    if (counter > 0){
        alert("Looks like some of the fields aren't filled out correctly. They're highlighted in red.");
}

redClass is a CSS snippet that highlights the td in red so they can see what needs to be fixed after hitting submit.

It works with all the other cells, but for some reason the addClass method is not adding required to .packSize and I"m not sure why.

Answer 1

You don't want to use ".required" in addClass you want it be "required".

The line

$(packSize).addClass(".required");

should be

$(packSize).addClass("required");