Проверка jQuery и конфликт заполнителей

Question

Я использую плагин jQuery Validation для проверки формы на моем сайте.

http://docs.jquery.com/Plugins/Validation

Я также использую следующий код для обеспечения поддержки Placeholder для браузеров, которые делаютне поддерживает атрибут HTML5 placeholder="".

// To detect native support for the HTML5 placeholder attribute
var fakeInput = document.createElement("input"),
    placeHolderSupport = ("placeholder" in fakeInput);

// Applies placeholder attribute behavior in web browsers that don't support it
if (!placeHolderSupport) {

    $('[placeholder]').focus(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
            input.val('');
            input.removeClass('placeholder');
        }
    }).blur(function() {
        var input = $(this);
        if (input.val() == '') {
            input.addClass('placeholder');
            input.val(input.attr('placeholder'));
        }
    }).blur().parents('form').submit(function() {
        $(this).find('[placeholder]').each(function() { //line 20
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
            }
        });
    });
}

Когда я отправляю свою форму, происходит следующее:

В браузерах, которые поддерживают атрибут placeholder, функция validate()срабатывает, и все работает как положено.

В браузерах, которые не поддерживают атрибут placeholder, строки 20-25 очищают все "заполнители", а затем срабатывает функция validate().Если ошибок нет, страница отправляется, и все работает, как положено.

В неподдерживаемых браузерах, в случае ошибок, соответствующие поля применяются class="error", как обычно - нотекст заполнителя не возвращается, пока не произойдет событие blur() в определенном поле.Это оставляет эти поля пустыми - и так как нет меток (только атрибут placeholder), пользователям остается угадывать, что каждое пустое поле должно содержать, пока не произойдет событие blur().

ДругоеПроблема, которая существует в неподдерживаемых браузерах, заключается в том, что поскольку исправление заполнителя изменяет атрибут value для отображения заполнителя, поля, помеченные как обязательные, проходят проверку при сбое.

Кажется, простого способа использования нетплагин Validation с кодом поддержки заполнителя.

Я хочу либо изменить код поддержки заполнителя, либо добавить функцию submitHandler: {} в качестве параметра функции validate(), чтобы она работала в неподдерживаемых браузерах.

Answer 1

Я столкнулся с подобной проблемой. Ты получил свой на работу? Я хотел бы сравнить заметки.

FWIW, вот что я сделал:

демоверсия jsfiddle здесь .

Добавление входных заполнителей в объект поддержки jQuery:

$.support.placeholder = (function() {
    var i = document.createElement( 'input' );
    return 'placeholder' in i;
})();

Цепочка-заполнитель:

$('input')
    .addClass('hint')
    .val( function() {
        if ( !$.support.placeholder ) {
            return $(this).attr('placeholder');
        }
    })
    .bind({
        focus: function() {
            var $this = $(this);
            $this.removeClass('hint');
            if ( $this.val() === $this.attr('placeholder') ) {
                $this.val('');
            }
        },
        blur: function() {
            var $this = $(this),

                // Trim whitespace if only space characters are entered,
                // which breaks the placeholders.
                val = $.trim( $this.val() ),
                ph = $this.attr('placeholder');

            if ( val === ph || val === '' ) {
                $this.addClass('hint').val('');
                if ( !$.support.placeholder ) {
                    $this.val(ph);
                }
            }
        }
    });

Добавить новое правило проверки

addMethod docs

$.validator.addMethod('notPlaceholder', function(val, el) {
    return this.optional(el) || ( val !== $(el).attr('placeholder') );
}, $.validator.messages.required);

Включить новый метод в объект правил проверки

$('form').validate({
    rules: {
        name: {
            required: true,
            notPlaceholder: true
        },
        email: {
            required: true,
            notPlaceholder: true,
            email: true
        }
    }
});

Answer 2

Я думаю, лучше всего добавить это в jquery.validate.js, в функцию required (строка 900):

required: function(value, element, param) {

        // Our change
        if (element.value == element.defaultValue) {
            return false;
        }
        // End our change

Answer 3

Заполнитель Обновление плагина решило мою проблему :)

Answer 4

Вы можете решить эту проблему, связав это с функцией отправки (либо с помощью jQuery validate, либо вручную)

 if(element.val() == text){
      element.val('');
 }