Question

我有一个表单，并且有很多ssn的文本字段。所有这些ssns字段都有不同的id和名称。所以现在我已经为这些ssn字段创建了一个类，以便验证变得容易。因此，我可以对所有字段进行基于类的验证，而不是对单个ssn字段进行大量验证。下面是ssn字段的html代码

<div class="input-container ssndiv">
  <input class="ssn1" id="owner_ssn1" type="text" name="owner_ssn1_name" maxlength="3" style="width:60px" title="Social Security Number has either been left blank or the data entered was invalid"/>
  <span class="inline-text">-</span>
  <input class="ssn2" id="owner_ssn2" type="text" name="owner_ssn2_name" maxlength="2" style="width: 60px"/>
 <span class="inline-text">-</span>
  <input class="ssn3" id="owner_ssn3" type="text"  name="owner_ssn3_name" maxlength="4" style="width: 60px" />
</div>

用于验证的Jquery函数

$('.ssndiv').each(function () {
   $(this).children('.ssn3').blur(function () {
       ssnValidation($(this).parent());
   });
});

function ssnValidation(obj){
      var error= false;
      var input="";

      obj.children('input').each(function () {
        if ($(this).hasClass('ssn1')) {
            ssnObject.ssn1 = $(this).val();
            input = $(this);
            input.nextAll("ul.error").remove();

        }
        if ($(this).hasClass('ssn2')) ssnObject.ssn2 = $(this).val();
        if ($(this).hasClass('ssn3')) ssnObject.ssn3 = $(this).val();
    });//end of each
     //Here I have the logic for ssn validation and return error varibale true or false
     if(error)
    {
        var title = input.attr('title');
        $('<ul class="error"><li>'+title+'</li></ul>').insertAfter(input.siblings('input').last());
        //$('.ssndiv input').addClass('required');
        input.addClass('required');
        input.siblings('input').addClass('required');
        //input.parent().find('.ssndiv').addClass( "required" );
        returnVal = false;
    }
     else{
         //$('.ssndiv input').addClass('correcr');
         input.parent().find('.ssndiv').addClass( "correct" );
         //input.addClass('correct');
         //input.siblings('input').addClass('correct');
         returnVal = true;
     }
       return returnVal;
  }

所以我在这里迭代每个ssndiv并检查验证是否正确。如果验证返回false，则应显示错误并将3个ssn字段突出显示为红色。如果所有3个字段都正确，则应删除错误并向3个字段显示绿色。我能够正确地完成验证部分。比如说，我为前3个字段提供了错误的值。它显示错误并突出显示字段。但是，如果我输入第二个ssn字段也是错误的，那么第一个突出显示将被删除。现在只有第二个ssn突出显示。但是如果验证错误，我还需要突出显示第一个ssn字段。但是现在当seond字段出错时，第一个字段上的高亮显示被删除。我不知道如何在代码中处理这个问题。我把它放在小提琴里。有人可以帮助我吗？

http://jsfiddle.net/jUQYr/77/

Answer 1

您可以尝试根据验证动态删除和添加css类，为有效输入定义一个类，为无效输入定义一个类，并从java脚本函数中移除并将这些类动态添加到对象中。您可以参考下面的语法

http://www.w3schools.com/jquery/jquery_css_classes.asp

Answer 2

请查看http://jsfiddle.net/4Pngm/1/

$('#test tr').each (function (){
    $(this).find('td:last-child').focusout(function () {
        var $first_td = $(this).parents('tr').find('td:first-child input');
        var $second_td = $(this).parents('tr').find('td:eq(2) input');
        var $third_td = $(this).parents('tr').find('td:last-child input');
        var first_value= $first_td.val().length;
        var second_value = $second_td.val().length;
        var third_value = $third_td.val().length;       
        if (first_value < 3 || second_value <2 || third_value < 4){
        $first_td.removeClass('valid').addClass('invalid');
        $second_td.removeClass('valid').addClass('invalid');
        $third_td.removeClass('valid').addClass('invalid');
        $(this).parents('tr').next().show();
        }else{
        $first_td.removeClass('invalid').addClass('valid');
        $second_td.removeClass('invalid').addClass('valid');
        $third_td.removeClass('invalid').addClass('valid');
        $(this).parents('tr').next().hide();
        }
    });
});

我没有遵循您的代码程序，这与您的代码略有不同。请查看并检查。让我知道这是你的要求。

当使用jquery发生错误时，在div下突出显示3个输入文本框

2 个答案: