jQuery自定義標簽驗證

Question

我想在提交時操縱jQuery Validate插件標簽的位置。

當您查看表單時，請按Submit（提交），您會注意到我已被驗證插件替換的標簽。 可以，但是我不想在標簽上加倍。

我希望錯誤消息替換現有的標簽文本，以便一個標簽處理輸入所用的內容以及錯誤消息。 我不確定這是否可能。

這是我當前的驗證規則：

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

這是我所擁有的一個工作示例： JSFIDDLE

Answer 1

我剛剛調整了您的小提琴，添加了CSS

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

單擊提交時，不顯示第二個標簽。

評論中問題的更新 ： Fiddle我對此做了另一個CSS調整：

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錯誤消息，如果輸入正確，則將標簽設置為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 highlight功能來檢查每個輸入是否有效，然后適當地附加有效或錯誤類和樣式。

忽略圖標樣式，但可以隨時使用此工具並隨意操作！

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