Использование jQuery Validate и добавление класса в Anscestor - PullRequest
Новая
       11

Использование jQuery Validate и добавление класса в Anscestor

0 голосов
/ 15 октября 2011

У меня есть эта форма: 

<form id="consult-form">
    <div class="group">
        <label for="pfname">First Name<span>*</span></label>
        <div class="input">
            <input class="large required" type="input" id="pfname" name="pfname" size="30" />
        </div>
    </div>

    <div class="group">
       <label for="plname">Last Name<span>*</span></label>
       <div class="input">
           <input class="xlarge required" type="input" id="plname" name="plname" size="30" />
       </div>
    </div>

    <div class="group">
        <label for="pphone">Phone<span>*</span></label>
        <div class="input">
            <input class="large required" type="tel" id="pphone" name="pphone" size="30" />
        </div>
    </div>
</form>

Я использую jQuery Validation для проверки этих трех полей. Я смог заставить основные функции плагина работать нормально. То, что я пытаюсь сделать, это добавить класс '.error' в содержащую div.group для каждого конкретного поля ввода.

Я покажу вам, что у меня есть: 

$(function(){

$.validator.setDefaults({
    errorElement: "span",
    errorClass: "help-inline"
});

$('#consult-form').validate({

    invalidHandler: function(form, validator) {
                var errors = validator.numberOfInvalids();
                if (errors) {
                    $required = $('input.required');
                    $required.parents('div.group').removeClass('error');

                    $required.each(function(index){
                        if ($(this).parent().has('span')) {
                            console.log(index+' is true');
                            $(this).parents('div.group').addClass('error');
                        }
                    });
                }
            },

    messages: {
        pfname: "Please enter your first name",
        plname: "Please enter your last name",
        pphone: "We need your phone number"
    }

});
});

В результате получается, что класс .error никогда не добавляется. Если я закомментирую функцию обхода массива, класс будет добавлен. По сути, я вижу, что изменения DOM, добавление и удаление элементов span, не читаются этим битом кода. Нужно ли использовать что-то подобное с комбинацией live () или делегата () для мониторинга изменений DOM?

Вот jsFiddle: http://jsfiddle.net/ToddSmithSalter/ueNZ4/1/

1 Ответ

0 голосов
/ 15 октября 2011

Если я правильно понял, что вам нужен особый стиль для всей группы неправильных полей ввода (метка и т. Д.), То здесь есть ответвление вашей скрипки - http://jsfiddle.net/aldis/3A7tV/1/ Я добавил JS "showErrors" в валидатор: 

$(function(){
    $.validator.setDefaults({
        errorElement: "span",
        errorClass: "help-inline"
    });
    $('#consult-form').validate({
        showErrors: function(errorMap, errorList) {
            this.defaultShowErrors();
            $('.error').removeClass('error');
            $('input.help-inline').parent().parent().addClass('error');
        },        
        invalidHandler: function(form, validator) {
                    var errors = validator.numberOfInvalids();
                    if (errors) {
                        $required = $('input.required');
                        $required.each(function(index){
                            if ($(this).parent().has('span')) {
                                console.log(index+' is true');
                            }
                        });
                    }
                },
        messages: {
            pfname: "Please enter your first name",
            plname: "Please enter your last name",
            pphone: "We need your phone number"
        }

    });
});
...