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

Когда вы нажимаете кнопку «Отправить», вторая метка не отображается.

Update на вопрос в комментарии: Я сделал еще одну настройку 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'); 
      } 
     }); 
    }