выделите 3 поля ввода текста под div при ошибке, используя jquery

0

У меня есть форма и есть много текстовых полей для ssn. Все эти поля ssns имеют разные идентификаторы и имена. Итак, теперь я создал класс для этих полей ssn, чтобы проверка прошла легко. Поэтому вместо того, чтобы иметь много проверок для отдельных полей ssn, я могу выполнять проверку на основе классов для всех полей вместе. Ниже приведен код html для полей ssn.

<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 поля. Я могу правильно выполнить часть проверки. Скажем, например, у меня есть неправильные значения для первых полей 3ssn. Он отображает ошибку и выделяет поля. Но если я вхожу во второе поле ssn также неправильно, то первое выделение удаляется. Теперь выделяется только второй ssn. Но мне нужно, чтобы первое поле ssn также выделялось, если проверка была ложной. Но теперь, когда поле seond имеет ошибку, подсветка на первом поле удаляется. Я не уверен, как справиться с этим в коде. Я положил это на скрипку. Может ли какой-нибудь орган помочь мне в этом?

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

Теги:

2 ответа

0

Посмотрите 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();
        }
    });
});

Я не следую вашей процедуре кода, это немного отличается от вашего кода. Посмотрите и проверьте. Дайте мне знать, это ваше требование или нет.

  • 0
    привет винотини .. Спасибо за ответ .. На самом деле он должен проверить на наличие логики и выделить красный, если ошибка. Скажем, например, я указал неправильные значения для первых 3 полей ssn. Он отображает ошибку и выделяет поля. Но если я введу второе поле ssn также неправильно, то первое выделение здесь удаляется. Теперь подсвечивается только второй ssn. Но мне нужно также выделить первое поле ssn, если проверка ложна. Можете ли вы проверить? Во всяком случае, я буду реализовывать ваше решение и проверить.
  • 0
    В моем решении, если вы введете второе поле ssn также неправильно, то первое выделение не будет удалено. В моем примере со скрипкой введите значения и проверьте.
Показать ещё 4 комментария
0

Вы можете попытаться удалить и добавить класс css динамически к вашему объекту на основе проверки, определить класс для допустимого ввода и один для недопустимого ввода и удалить и добавить эти классы в свой объект динамически из вашей функции java-скрипта. Вы можете ссылаться ниже на синтаксис

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

  • 0
    Привет, Ашиш, вот как я это делаю ... динамически удаляя n, добавляя класс ... но цикл, который я перебираю, кажется сбивающим с толку ... было бы здорово, если бы ты мог проверить мою скрипку ...

Ещё вопросы

Сообщество Overcoder
Наверх
Меню