javascript - jQUERY 单独添加和删除类

Question

我创建了一个表单 click here to view .该表单由基本验证功能、一个字符检查和验证数字字段组成。验证检查后，它会添加类 valid(绿色)或 invalid(红色)

目前，当用户填写输入时“可以在我的演示中看到”，我的验证检查会激活所有输入字段，而不是一次激活一个输入字段。

代码片段

var validInput = function(fieldName) {
    $(fieldName).css({
        "background-color": "rgba(229,254,205)"
    });
};

var inValidInput = function(fieldName) {
    $(fieldName).css({
        "background-color": "rgba(229,254,205)"
    })
};

// VALIDATOR FUNCTION FOR CHARACTERS
$('.characters').focusout(function() {
    var letters = /^[a-zA-Z\s]+$/;
    if ($(this).val().match(letters)) {
        validInput('.characters');
        $('.valid-checked').addClass("checked").css("color", "rgb(36,199,90)");
        $('.invalid-checked').removeClass("invalid");
    } else {
        $('.invalid-checked').addClass("invalid").css("color", "rgba(255, 0, 0, 0.92)");
        $('.valid-checked').removeClass("checked");
    }
});

Answer 1

指出你的几个错误，

1) validInput('.characters');不要验证类 .characters 的所有输入仅验证触发事件的输入。所以它必须是validInput(this); , 将元素传递给函数。

2) $('.valid-checked').addClass("checked").css("color", "rgb(36,199,90)");
            $('.invalid-checked').removeClass("invalid");

这里不要更改所有有效和无效图标的css。仅将更改应用于 <div class="protect-field planner-form"> 中用此输入包裹的图标因此，从输入元素追踪这个包装器 div，然后追踪回图标并仅更改它们。

var validInput = function(fieldName) {
    $(fieldName).css({
        "background-color": "rgba(229,254,205)"
    });
};

var inValidInput = function(fieldName) {
    $(fieldName).css({
        "background-color": "rgba(229,254,205)"
    })
};

// VALIDATOR FUNCTION FOR CHARACTERS
$('.characters').focusout(function() {
    var letters = /^[a-zA-Z\s]+$/;
    var $inputWrapper = $(this).closest('.planner-form'); //get the wrapper of the input
    if ($(this).val().match(letters)) {
        validInput(this); //pass this input element to validate 

        // Trace down the appropriate icons and change.
        $inputWrapper.find('.valid-checked').addClass("checked").css("color", "rgb(36,199,90)");
        $inputWrapper.find('.invalid-checked').removeClass("invalid");
    } else {
        $inputWrapper.find('.invalid-checked').addClass("invalid").css("color", "rgba(255, 0, 0, 0.92)");
        $inputWrapper.find('.valid-checked').removeClass("checked");
    }
});