jQuery 自定义标签验证

Posted 2023-05-09

【中文标题】jQuery 自定义标签验证

【英文标题】：jQuery Custom Label Validation

【发布时间】：2014-12-24 13:00:51

【问题描述】：

我想在提交时操纵 jQuery Validate 插件标签定位的定位。

当您查看表单时，按提交，您会注意到我拥有的标签正在被验证插件替换。这没关系，但我不想在标签上加倍。

我希望错误消息替换现有的标签文本，以便一个标签处理输入的用途和错误消息。我不确定这是否可能。

这是我目前的验证规则：

validation: function () 
        $('form').validate(
            rules: 
                "email": 
                    required: true,
                    email: true
                ,
                    "name": 
                    required: true
                
            
        );
    

这是我所拥有的一个工作示例：JSFIDDLE

【问题讨论】：

jQuery Validate 插件创建并切换它自己的错误标签。话虽如此，根据您的问题的措辞，我很难确定您的 jsFiddle 的操作是否有问题，或者您是否只想删除代码中的任何潜在冗余。那么你的 jsFiddle 的哪一部分（如果有的话）不能正常工作？

【参考方案1】：

我刚刚调整了你的 Fiddle 添加 CSS

fieldset label:nth-of-type(even)

 display:none;

点击提交时，第二个标签不显示。

更新评论中的问题：我已经为此做了另一个 CSS 调整，Fiddle：

fieldset label[style*='display: none'] + label

  display:block;
  color:#007c92;
  top:15px;
  position:absolute;
  left:23px;
  font-size:0.7em;
  font-weight:bold;
 

我不确定这是否是您想要的 - 姓名和电子邮件现在一直在正确条目的顶部显示标签。如果仅应针对电子邮件执行此操作，则可以对其进行调整。 如果没有这些 CSS 调整，看起来 validate 插件最初只会在输入中显示标签，在出现错误时在标签中显示错误消息，并在输入正确的情况下将标签设置为 display:none。验证插件中可能有一个选项/设置可以在不使用这种解决方法的情况下拥有此功能，但也许您已经检查过了。

【讨论】：

我担心这可能是解决方案。非常感谢这个。您可以解决电子邮件标签的问题吗？当您输入正确的电子邮件时，输入的标签会消失？

@Filth 很高兴能为您提供帮助，并且刚刚更新了我对第二期的回答。

【参考方案2】：

不是 100% 确定这是否是您正在寻找的，但是，当您显示 jQuery Validate 标签时，您不需要隐藏您的原始标签。您可以简单地将默认标签的文本替换为 errorPlacement 回调函数中单行中的错误消息文本...

errorPlacement: function (error, element) 
    $(element).next('label').text(error.text());

概念证明：http://jsfiddle.net/z2gpjf03/

---

显然，它需要做更多的工作，但它显示了在按照您的要求使用一组标签的同时可以消除多少代码。

http://jsfiddle.net/89y26/178/

【讨论】：

嘿，非常感谢 - 您的回答引发了一些研究，我修复了我的解决方案。这是解决方案！ jsfiddle.net/89y26/236

@Filth，我很乐意提供帮助。但是，看看您的演示，我可以说您绝对不应该对errorPlacement 函数中的类做任何事情。它仅用于在布局中放置错误。

【参考方案3】：

没错，我做到了！是一项任务，但很高兴能有这样的工作：http://jsfiddle.net/89y26/236/

基本上，它使用highlight 和unhighlight 函数来检查每个输入是否有效，然后适当地附加有效或错误类和样式。

忽略图标样式，但请随意使用这些家伙并根据自己的喜好进行操作！

validation: function() 
        $('form').validate(
            rules: 
                "name": 
                    required: true
                ,
                "email": 
                    required: true,
                    email: true
                
            ,
            //Add Error Class To Fieldset if field invalid
            highlight: function(element) 
                $(element).parent().removeClass('form--valid').addClass('form--error');
                $(element).next('.input-label').hide();
            ,
            //Add Valid Class To Fieldset if field valid
            unhighlight: function(element) 
                $(element).parent().removeClass('form--error').addClass('form--valid');
                $(element).next('.error').hide();
                $(element).parent('fieldset').find('.input-label').show();
            ,
            errorPlacement: function(error, element)
                error.addClass('input-label--error').insertBefore(element);
                //Add Error class to fieldset
                element.parent('fieldset').addClass('form--error');
            
      );
   

【讨论】：

我不能以目前的形式认可这个解决方案。另外，请将相关代码放在答案中，使其独立于 jsFiddle。谢谢。

你绝对不应该对errorPlacement函数中的样式或类做任何事情。它仅用于在布局中放置错误

我了解 Sparky，但我想需求就是需求，我找不到另一个合适的解决方案。我将使用适当的代码编辑我的答案。