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

   }

});

Answer 4

我遇到了与我正在处理的表单类似的问题。您可以使用the jq-watermark plug-in来制作占位符/水印。

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

Answer 5

我的快速解决方案：

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

Answer 6

我发现如果您添加自定义规则，即：email：true，则不会忽略验证。因此，如果您查看与jquery验证下载捆绑在一起的additional-methods.js，则会有一个名为alphanumeric的规则。这具有所有默认的必需功能。只需使用此自定义规则，它应该工作。我在旧浏览器上使用http://widgetulous.com/placeholderjs/来获取占位符。干杯

Answer 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);
                    };
                 });
      });

Answer 8

从http://jqueryvalidation.org/

尝试最新版本的jquery.validate

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

Answer 9

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

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

jQuery Validate的占位符问题

9 个答案: