jQuery自定义标签验证

我想在提交时操纵jQuery验证插件标签定位

查看表单时，按submit，您会注意到我的标签被验证插件替换。这是可以的，但我不想要一个双重标签

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

以下是我当前的验证规则：

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

下面是我的一个工作示例：

我刚刚调整了添加CSS的步骤

fieldset label:nth-of-type(even)
{
 display:none;
}

单击“提交”时，不会显示第二个标签

更新对于评论中的问题：我对此做了另一个CSS调整，：

我不确定这是否是你想要的-姓名和电子邮件现在会在正确的条目上显示标签。如果仅针对电子邮件执行此操作，则可以对其进行调整。

---

如果没有这些CSS调整，validate插件看起来只会在输入中最初显示标签，在出现错误时在标签中显示错误消息，并在输入正确时将标签设置为

display:none

。验证插件中可能有一个选项/设置，可以在不使用这种解决方法的情况下使用此功能，但您可能已经检查过了。

无法100%确定这是否是您要查找的，但是，在显示jQuery验证标签时，您不需要隐藏原始标签。您只需在

errorPlacement

回调函数中的一行中用错误消息文本替换默认标签的文本即可

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

概念验证：

---

显然，它需要更多的工作，但它显示了在使用一组标签的同时，有多少代码可以被删除

---

对了，伙计们，我做到了！这是一项使命，但很高兴它能发挥作用：

基本上，它使用

高亮显示

和

取消高亮显示

功能来检查每个输入是否有效，然后适当地附加有效或错误类和样式

忽略图标样式，但请随意使用这家伙和操纵你喜欢的方式

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

---

我担心这可能是解决办法。谢谢你。您是否有电子邮件标签的解决方案？当您输入正确的电子邮件时，输入的标签将消失？@filt如果我能帮助您，我会很高兴，并且刚刚更新了第二个问题的答案。jQuery验证插件创建并切换自己的错误标签。也就是说，根据您问题的措辞，我很难确定JSFIDLE的操作是否有问题，或者您是否只是想删除代码中的任何潜在冗余。那么，JSFIDLE的哪一部分（如果有的话）工作不正常呢？嘿，伙计，非常感谢你的回答——你的回答引发了一些研究，我修复了我的解决方案。这就是解决办法@肮脏，我很乐意帮忙。但是，看看您的演示，我可以说您绝对不应该在

errorPlacement

函数中对类执行任何操作。这只是为了将错误放在布局中。我不能认可目前的解决方案。另外，请将相关代码放在答案中，使其独立于JSFIDLE。谢谢。您绝对不应该在

errorPlacement

函数中对样式或类执行任何操作。这只是为了将错误放在布局中，我理解Sparky，但我想需求就是需求，我找不到其他合适的解决方案。我将用适当的代码编辑我的答案。

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