Question

我创建了一个表单click here to view。表单由基本验证功能，一个字符检查和验证号字段组成。验证检查后，它会添加课程valid（绿色）或invalid（红色）

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

代码段

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

您必须在调用validInput函数时使用$（this）。

此外，您需要在$（this）上使用.siblings方法，而不是使用$（'。valid-checked'）等等。

Answer 2

指出你的几个错误，

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

Answer 3

添加css

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

使用this。

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

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

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

DEMO

Answer 4

你有太多的代码，过于复杂的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');
          }
        }
  });
});

显然不会为你做这一切，但这就是你需要的一般想法。

Answer 5

从我可以看到你的问题是你的数字验证功能失败了。每个文本框都单独进行评估。这应该修复你的验证器：

try:
    mynewstring = mystring.encode('ascii')
except UnicodeEncodeError:
    print("there are non-ascii characters in there")

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

jQUERY单独添加和删除类

5 个答案: