проблема заполнителя с jQuery Validate

Question

Сегодня я заметил, что у нас есть проблема с jquery Validate при использовании вместе с текстом-заполнителем.

Пример:

<div class="sort left">
<label for="username" class="inlineelement">Username</label>
<input id="registername"  type="text" placeholder="your name" autocomplete="off" class="required"></input>

Я заметил, что еслимы проверяем нашу форму, используя jquery Validate (http://docs.jquery.com/Plugins/Validation/Methods)

Есть ли обходной путь для этого, или нам нужно вернуться к фокусу html (текст-заполнитель) в наших полях формы?

Answer 1

Я сталкивался с той же проблемой. После некоторого возни, нашел обходной путь с этим пользовательским методом. Этот пользовательский метод будет соответствовать заполнителям.

jQuery.validator.addMethod("placeholder", function(value, element) {
  return value!=$(element).attr("placeholder");
}, jQuery.validator.messages.required);

Пометить эту строку в конце файла additional-methods.js.

Затем вы будете использовать его следующим образом:

$("form").validate({
  rules: {
    username: {required: true, placeholder: true},
  },
  message: {
    username: {
      required: "Username required", placeholder: "Username required",
    },
  }
});

Answer 2

Это общий способ проверки заполнителей (используйте следующий код ПОСЛЕ инициализации логики проверки).Он работает путем введения пользовательской логики во все методы проверки.

$(function () {
    $.each($.validator.methods, function (key, value) {
        $.validator.methods[key] = function () {
            var el = $(arguments[1]);
            if (el.is('[placeholder]') && arguments[0] == el.attr('placeholder'))
                arguments[0] = '';

            return value.apply(this, arguments);
        };
    });
});

Answer 3

У меня была похожая проблема с формой, над которой я работаю. Вы можете использовать плагин jq-watermark для создания ваших заполнителей / водяных знаков.

Работает с плагином jQuery Validate, т. Е. Не препятствует проверке.

Answer 4

Вы могли бы написать сценарий вокруг этого, возможно.

Это удалит атрибут placeholder при отправке и восстановит их в случае ошибки.

var placeholders = {};
$('form').validate({
   submitHandler: function(form) {

       $(form).find(':input[placeholder]').each(function() {
          var placeholder = $(this).attr('placeholder'); 
          placeholders[placeholder] = this;
          $(this).removeAttr('placeholder');
       });       

       form.submit();
   },

   invalidHandler: function() {

      $.each(placeholders, function(placeholder, element) {
          $(element).attr('placeholder', placeholder);
      });

   }

});

Answer 5

Мое быстрое решение:

            $(".validateForm").submit(function(){
            $(this).find("input[type=text]").each(function(){
                if($(this).attr("placeholder") == $(this).val())$(this).val("");
            })
        })

Answer 6

Попробуйте последнюю версию jquery.validate из http://jqueryvalidation.org/

версия 1.11.1, кажется, решил эту проблему для меня = D

Answer 7

$("form").validate();
    $(function () {
                $.each($.validator.methods, function (key, value) {
                $.validator.methods[key] = function () {
                var el = $(arguments[1]);
                if (el.is('[placeholder]') && arguments[0] == el.attr('placeholder'))
                    arguments[0] = '';
                    return value.apply(this, arguments);
                    };
                 });
      });

Answer 8

Я обнаружил, что если вы добавите пользовательские правила, такие как: email: true, то проверка не будет проигнорирована.Поэтому, если вы посмотрите на файл Additional-method.js, который поставляется вместе с загрузкой проверки jquery, есть правило, называемое буквенно-цифровым.Это имеет все необходимые функции по умолчанию.Просто используйте это пользовательское правило, и оно должно работать.Я использую http://widgetulous.com/placeholderjs/ для поддержки заполнителей в старых браузерах.Приветствия

Answer 9

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

function tabFields(){
    $('#form input[type="text"]').each(function(){
        $(this).focus().blur();
    });
}