jQuery Validate 的占位符问题答案

【问题标题】：placeholder issue with jQuery ValidatejQuery Validate 的占位符问题
【发布时间】：2011-05-20 01:17:32
【问题描述】：

我今天注意到 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（占位符文本）？

【问题讨论】：

我在 Chrome 11.0 上使用 jQuery 1.5.1 和 jQuery Validate 1.8.0 ......并且插件验证正确。占位符文本出现在输入中，如果我不输入任何文本，则会出现错误消息。您使用的是哪个版本的 jQuery 和插件？
我们正在使用 1.5.2 的 jquery 和 jQuery 验证插件 pre-1.5.2（找不到更高版本的验证）
最新版本的 jQuery Validate：bassistance.de/jquery-plugins/jquery-plugin-validation - 适用于 jQuery 1.5.2。
好的，现在有了，但类似的问题。我想我们可能忽略了一些非常明显的事情，我们要求的课程对所有孩子都是一样的。 class="required" 我们的脚本是： $(document).ready(function(){ $("#registerForm").validate({ rules: { reason: "required" } }); });不知道还能是什么
请编辑您的问题以完整描述您遇到的问题。

标签： jquery jquery-validate

【解决方案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",
    },
  }
});

【讨论】：

我可以看到的一个问题是，如果该人想要输入与占位符相同的值。
请注意，这有一个问题，它会导致所有带有占位符的元素都按要求行事，即使它们没有被标记为要求。
类似这个答案：stackoverflow.com/questions/4904017/…

【解决方案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);
        };
    });
});

【讨论】：

【解决方案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);
      });

   }

});

【讨论】：

$.each 函数缺少右括号。但是，除此之外，IE 会吐出在同一行上未定义占位符。
@Micah 修复了缺少的)。你定义了placeholders 吗？
糟糕，忘记定义placeholders。谢谢。

【解决方案4】：

我正在处理的表单有类似的问题。您可以使用the jq-watermark plug-in 来做占位符/水印。

它适用于 jQuery Validate 插件，即不妨碍验证。

【讨论】：

【解决方案5】：

我的快速解决方案：

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

【讨论】：

【解决方案6】：

我发现如果您添加自定义规则，即：email:true，那么验证不会被忽略。因此，如果您查看与 jquery 验证下载捆绑在一起的 Additional-methods.js，则有一个称为字母数字的规则。这具有所有默认所需的功能。只需使用此自定义规则，它应该可以工作。我正在使用http://widgetulous.com/placeholderjs/ 来支持旧浏览器的占位符。干杯

【讨论】：

【解决方案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);
                    };
                 });
      });

【讨论】：

【解决方案8】：

从http://jqueryvalidation.org/尝试最新版本的jquery.validate

1.11.1 版似乎已经为我解决了这个问题 =D

【讨论】：

已确认 - 与 jquery.placeholder 插件结合使用的最新 v1.11.1 修复了问题。

【解决方案9】：

我使用了一个技巧，如果你专注于字段，就会出现占位符。以下代码将聚焦并模糊所有输入字段。

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

【讨论】：