javascript - 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');
        }
    });

因此，通过上面的代码，我可以向输入和文本区域元素添加默认值，如下所示

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

不幸的是，占位符属性还不是一个选项

现在的问题是我正在尝试使用像这样的 Jquery 验证来验证这些元素

$.validator.addMethod("ignoreDefaultValues",
函数(值，元素){
if ($(element).data('val-default'))
return !($(element).data('val-default') == element.value);
返回真；
},
“必填项目”
);

$('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 验证似乎忽略了规则。例如，如果我通过键入空格进行测试，它将验证并警告“无效”，但它只是忽略我的自定义验证。

我做错了什么？

我错过了什么吗？

Answer 1

您需要在提交功能之前设置验证。因此，不要在 submit 处理程序中执行 $(this).valid(...) ，而是预先执行此操作:

$('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!');
    }
});