Question

这是我的例子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>

我想要它，以便当选择值（.tableDropDown）为“me”时，.packSize会在其上添加类.required，因为我使用.required进行表单验证。

我正在尝试在jquery中使用addClass方法，但它不起作用。

这就是我的代码：

 $(".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");
    }
});

用于验证的功能是：

$(".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是一个CSS片段，用红色突出显示td，以便他们可以看到在提交后需要修复的内容。

它适用于所有其他单元格，但由于某种原因，addClass方法不需要添加.packSize，我不知道为什么。

Answer 1

你不想在addClass中使用“.required”，你希望它是“必需的”。

该行

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

应该是

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

jquery addClass无法处理表单元素

1 个答案: