jQuery 自定义标签验证

Question

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

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

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

这是我目前的验证规则：

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

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

Answer 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。验证插件中可能有一个选项/设置可以在不使用这种解决方法的情况下拥有此功能，但也许您已经检查过了。

Answer 2

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

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

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

---

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

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

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