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

也许你可以围绕它编写脚本。

这将删除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);
      });

   }

});