Пользовательская проверка Jquery с атрибутами данных HTML 5 и значением по умолчанию

Question

Я пытаюсь создать пользовательскую проверку jquery на стороне клиента и пытаюсь игнорировать значения по умолчанию, которые я генерирую из атрибутов данных HTML5

   $('input, textarea').each(function () {
            if ($(this).data('val-default')) {
                $(this).focus(function () {

                if (this.value == $(this).data('val-default'))
                    this.value = '';
            });
            $(this).blur(function () {
                if (this.value == '')
                    this.value = $(this).data('val-default');
            });
            this.value = $(this).data('val-default');
        }
    });

Так что с помощью приведенного выше кода я могу добавить значения по умолчанию для ввода и textareaэлементы вроде этого

data-val-default="Type your first name here"

Атрибут Placeholder, к сожалению, пока не вариант

Проблема сейчас в том, что я пытаюсь проверить эти элементы с помощью проверки Jquery, как это

$.validator.addMethod("ignoreDefaultValues", function (value, element) { if ($(element).data('val-default')) return !($(element).data('val-default') == element.value); return true; }, "Required field" );

$('form#contact-form').submit(function (e) {
             e.preventDefault();
            if (!$(this).valid({
                 rules:
                        {
                    title:
                        {
                            ignoreDefaultValues: true,
                            required: true
                        },
              description:
                        {
                            ignoreDefaultValues: true,
                            required: true
                        },
                     name:
                        {
                            ignoreDefaultValues: true,
                            required: true
                        },
                        email:
                        {
                            ignoreDefaultValues: true,
                            required: true
                        }
                }
            })) {
                alert("NOT VALID!");
            } 


       else 
          {
          alert("IS VALID!");
            //todo: ajax post to server
        }
    });

Вот пример элемента ввода

<input type="text" class="firstname" name="firstname" data-val-default="Type your first name here" data-val="true" data-val-required="*" />

Проверка jquery, похоже, игнорирует правила.если я проверю, например, введя пустое место, он проверит и выдаст предупреждение «NOT VALID», но он просто проигнорирует мою пользовательскую проверку.

Что я делаю неправильно?

Я что-то пропустил?

Answer 1

Вам необходимо настроить проверку перед отправкой функции.Поэтому вместо того, чтобы делать $(this).valid(...) в вашем submit обработчике, вместо этого сделайте это заранее:

$('form#contact-form').validate( { //your rules
    ,
    submitHandler:function(){
       alert('Is Valid!');
       $(this).submit(); //or submit via AJAX, or whatever you planned...
    },
    invalidHandler:function(){
       alert('Is not valid!');
    }
});