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

Question

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

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

Я также использую следующий код, чтобы обеспечить поддержку заполнителем для браузеров, которые не поддерживают атрибут 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().

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

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

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

Answer 1

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

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

Answer 2

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

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

jsfiddle demo here.

Добавить входные заполнители объекта поддержки 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); 

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

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

Answer 3

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

required: function(value, element, param) { 

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

Answer 4

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