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调整，看起来验证插件最初只会在输入中显示标签，如果出现错误则在标签中显示错误消息，并在正确输入的情况下将标签设置为display:none。可能在validate插件中有一个选项/设置可以在不使用这种解决方法的情况下使用此功能，但是您可能已经检查过了。

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

jQuery自定义标签验证

3 个答案: