我创建了一个表单 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");
}
});
最佳答案
指出你的几个错误,
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");
}
});
关于javascript - jQUERY 单独添加和删除类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35889634/