如何用jQuery仅为触发onchange的单个Input添加/移除Class

你当前代码里用$('.n')这类选择器会选中所有带对应class的元素，所以才会影响全部输入框。要只操作触发事件的那个元素，只需两步修改：

1. 修改HTML中的onchange事件绑定，传递当前元素 #

把每个输入框的onchange属性改成传递当前元素（this），同时同步修改eventGroupCopy里的输入框（不然新增的元素会失效）：

<!-- 名称输入框 -->
<input class="n" onchange="checkFormOK('n', this)" type="text" name="eventName[]" placeholder="Enter name" value="Event 1"><br>
<!-- 价格输入框 -->
<input class="p" onchange="checkFormOK('p', this)" type="number" name="price[]" placeholder="Enter Price i.e.&nbsp;&nbsp;&nbsp;1000&nbsp;&nbsp;&nbsp;no decimals" value="123"><br>
<!-- 开始日期输入框 -->
<input class="s" onchange="checkFormOK('s', this)" type="date" name="eventStart[]" value="2023-08-13">
<!-- 结束日期输入框 -->
<input class="e" onchange="checkFormOK('e', this)" type="date" name="eventEnd[]" value="2023-08-14">

2. 修改checkFormOK函数，针对当前元素操作 #

更新函数定义，接收当前元素参数，直接操作这个元素而非所有同class元素：

function checkFormOK(field, element) {
    // 处理名称输入框
    if (field == 'n') {
        if ($(element).val().length == 0) {
            $(element).addClass('formError');
        } else {
            $(element).removeClass('formError');
        }
    }
    // 处理价格输入框（补全之前注释的逻辑）
    if (field == 'p') {
        if ($(element).val().length == 0 || isNaN($(element).val())) {
            $(element).addClass('formError');
        } else {
            $(element).removeClass('formError');
        }
    }
    // 日期校验逻辑同理，用$(element)定位当前触发的输入框
    if (field == 's' || field == 'e') {
        // 如需校验同组日期，可通过$(element).siblings('.s')/$(element).siblings('.e')获取同组其他日期框
    }
}

额外说明 #

提交按钮的onclick="checkFormOK()"如果是做全局表单校验，建议单独写一个全局校验函数，遍历所有输入框逐个检查，不要复用当前的单个元素校验逻辑。

内容的提问来源于stack exchange，提问作者jasonc310771