У меня есть форма и есть много текстовых полей для 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/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();
}
});
});
Я не следую вашей процедуре кода, это немного отличается от вашего кода. Посмотрите и проверьте. Дайте мне знать, это ваше требование или нет.
Вы можете попытаться удалить и добавить класс css динамически к вашему объекту на основе проверки, определить класс для допустимого ввода и один для недопустимого ввода и удалить и добавить эти классы в свой объект динамически из вашей функции java-скрипта. Вы можете ссылаться ниже на синтаксис