jQUERY单独添加和删除类

我已经创建了一个表格click here to view。该表格由一个基本验证功能，一个字符检查和验证号码字段组成。一旦验证检查它增加了两种类valid（绿色）或invalid（红色）jQUERY单独添加和删除类

在“可被视为在我的演示”的那一刻，当用户填写输入我的验证检查激活所有输入字段，而不是一次一个。

代码片断

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

来源

2016-03-09 NewBoy

你一次没有处理过一个元素..你正在使用类选择器和所有的玩.. –

所以你想在我接触特定的输入红绿色？ –

他指出几个错误从你们，

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

来源

2016-03-09 11:26:37

必须在调用ValidInput的功能使用$（本）。另外，您需要在$（this）上使用.siblings方法，而不是使用$（'。valid-checked'）等等。

来源

2016-03-09 11:23:46

没有给你整个解决方案因为自己的工作而感到高兴:) –

新增CSS

.checked { 
    display: inline; 
} 
.invalid { 
    display: inline; 
}

使用this。

validInput(this);//instead the class referance.

然后使用closest()更改显示隐藏图标的代码。

$(this).closest('.protect-field').find('.valid-checked');

DEMO

来源

2016-03-09 11:32:04 RRK

你有太多的代码，过于复杂的HTML ..

http://codepen.io/anon/pen/yOOPgW

$(document).ready(function(){ 
    $('#validateForm input').focusout(function(){ 
    if($(this).hasClass('characters')) 
     { 
      if($(this).val() != 'a'){ 
      $(this).next('.checker').css("background-color", "red").addClass('invalid'); 
      } //change this 
     } 
     else 
     { 
      if($(this).val() != 12345){ 
      $(this).next('.checker').css("background-color", "red").addClass('invalid'); 
      } 
     } 
    }); 
});

显然不打算做这一切为雅，但多数民众赞成的总体思路是什么你需要。

来源

2016-03-09 11:34:00

从我能看到你的问题是你的数字验证功能失败。每个文本框都是单独评估的。这应该可以解决您的验证：

$('.numbers').focusout(function() { 
    var numbers = /^[-+]?\d+$/; 
    if ($(this).val().match(numbers)) { 
     validInput('.numbers'); 
     $('.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"); 
    } 
});

的另一个问题是，你的第一个孩子的名字文本框使用数字类实际上应该是你的角色类。

来源

2016-03-09 11:35:56

jQUERY单独添加和删除类

回答

相关问题