jQuery Validate中的占位符问题

Question

jQuery Validate中的占位符问题

8

我发现今天在使用 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（占位符文本）来解决？

- 422

我正在使用jQuery 1.5.1和jQuery Validate 1.8.0在Chrome 11.0上...插件可以正确验证。占位符文本出现在输入框中，如果我没有输入任何文本，则会显示错误消息。您使用的是哪个版本的jQuery和插件？ - Adrian J. Moreno

我们正在使用1.5.2版本的jQuery和jQuery验证插件pre-1.5.2（找不到更新的验证插件版本）。 - 422

1

jQuery Validate的最新版本：http://bassistance.de/jquery-plugins/jquery-plugin-validation/ - 与jQuery 1.5.2兼容。 - Adrian J. Moreno

好的，现在有了，但是出现了类似的问题。我认为我们可能忽略了一些非常明显的东西，我们所有字段都需要相同的必填类class="required"，而我们的脚本是：$(document).ready(function(){ $("#registerForm").validate({ rules: { reason: "required" } }); }); 不确定还可能是什么问题。 - 422

请编辑您的问题，全面描述您遇到的问题。 - Sparky

9个回答

5

这是验证占位符的通用方法（在验证逻辑初始化后使用以下代码）。它通过将自定义逻辑注入所有验证方法来工作。

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

- Hogan

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

   }

});

- alex

$.each函数缺少右括号。但是，除此之外，IE在同一行上返回placeholders未定义的错误。 - micah

@Micah 修复了缺失的)。你定义了 placeholders 吗？ - alex

哎呀，忘记定义“占位符”了。谢谢。 - micah

3

我在处理一个表单时遇到了类似的问题。你可以使用jq-watermark插件来实现占位符/水印。

它与jQuery Validate插件兼容，即不会阻碍验证过程。

- smilqn pavlov

2

我的快速解决方案：

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

- user2323336

1

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

对我来说，1.11.1版本似乎已经解决了这个问题=D。

- winry

确认 - 最新版本v1.11.1与jquery.placeholder插件一起使用可以解决问题。 - Olivier

1

我发现如果您添加自定义规则，例如：email:true，则验证不会被忽略。因此，如果您查看随 jQuery 验证下载捆绑的 additional-methods.js 文件，其中有一个名为 alphanumeric 的规则。它具有所有默认所需的功能。只需使用此自定义规则即可。我正在使用http://widgetulous.com/placeholderjs/来支持旧浏览器的占位符。干杯

- Clinton Green

1

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

- Avinash Saini

0

我使用了一个技巧，如果你聚焦在输入框上，占位符就会出现。以下代码将聚焦和模糊所有的输入框。

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

- Miguel Stevens

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jonsuh · Accepted Answer

我曾遇到同样的问题。经过一些试验，使用了这个自定义方法找到了一个解决方案。这个自定义方法可以容纳占位符。

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