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"

遗憾的是，占位符属性不是一个选项

现在的问题是我正在尝试使用像这样的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!');
    }
});

使用Html 5数据属性和默认值进行Jquery自定义验证

1 个答案: