JQuery проверки групп и ранний успех - PullRequest
0 голосов
/ 23 февраля 2012

Я пытаюсь проверить SSN из 3 полей.Я проверяю эти поля (и другие поля в моей форме) на лету и показываю зеленую проверку, если поле проверяется, и красный х, если нет, вместе с сообщением об ошибке.

Проблемав том, что, как у меня сейчас настроено, функция успеха срабатывает после первого поля SSN, показывая зеленую галочку еще до того, как были введены другие 2 поля.Конечно, если они покидают второе поле в этот момент, они получают сообщение об ошибке, но как я могу настроить его, чтобы он проверял эту группу только после ввода третьего поля.Код ниже ...

$('form').validate({

onfocusout: function(element) { $(element).valid(); } ,

rules: {
    tbSSN1:           {required: true, minlength: 3, regexp: /^[0-9]*$/},
    tbSSN2:           {required: true, minlength: 2, regexp: /^[0-9]*$/},
    tbSSN3:           {required: true, minlength: 4, regexp: /^[0-9]*$/},
    DOBMonth:         {required: true},
    DOBDay:           {required: true},
    DOBYear:          {required: true}
},

messages: {
    tbSSN1:           'Please enter your SSN to retreive your free credit scores.',
    tbSSN2:           'Please enter your SSN to retreive your free credit scores.',
    tbSSN3:           'Please enter your SSN to retreive your free credit scores.',
    DOBMonth:         'Please enter your DOB to retreive your free credit scores.',
    DOBDay:           'Please enter your DOB to retreive your free credit scores.',
    DOBYear:          'Please enter your DOB to retreive your free credit scores.'
},

groups: {
    SSN: "tbSSN1 tbSSN2 tbSSN3",
    DOB: "Month Day YearDropDown"
},

errorElement: "span",

highlight: function(element, errorClass) {
    var ep = $(element).parent();
    console.log(ep.find('label'));
    $(element).addClass('error');
    ep.find('label').css('color','red');
    ep.find('span.errorX').remove();
    ep.find('label').after('<span class="errorX"></span>');
},

success: function(label) {
    var lp = $(label).parent();
    label.addClass("valid"); 
    lp.find('input').removeClass('error'); 
    lp.find('label').css('color','black'); 
    lp.find('span.errorX').remove();
}

});

Ответы [ 2 ]

0 голосов
/ 23 февраля 2012

Быстрый способ справиться с этим - прикрепить к событию размытия в последнем поле и установить флаг, который будет проверяться при выполнении логики проверки.Если флаг не установлен, тогда логика заканчивается тут же и не изменяет DOM.

0 голосов
/ 23 февраля 2012
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...