плагин проверки jquery не работает последовательно

Question

Я использую Twitter Bootstrap для создания формы HTML и плагина проверки JQuery для его проверки. Мой код, как показано ниже: HTML Часть

<form id="profile_form"> 
    <div class="control-group"> 
       <label class="control-label" for="firstname">firstname&nbsp;<span>*</span></label> 

       <div class="controls"> 
        <input type="text" id="firstname" name="firstname" class="input-medium" 
          value="<?php echo $firstname ?>"> 
       </div> 
      </div> 

      <div class="control-group"> 
       <label class="control-label" for="lastname">lastname&nbsp;<span>*</span></label> 

       <div class="controls"> 
        <input type="text" id="lastname" name="lastname" class="input-medium" 
          value="<?php echo $lastname ?>"> 
       </div> 
      </div> 
</form> 

Этот HTML использует внешний файл Javascript, в котором кода проверки проживает. И часть файла сценарий для проверки, как следующее:

$(document).ready(function() { 
    $('#profile_form').validate({ 
     rules: { 
      firstname: { 
       required: true 
      }, 
      lastname: { 
       required: true 
      } 
     }, 
     highlight: function (element) { 
      $(element).closest('.control-group').removeClass('success').addClass('error'); 
     }, 
     success: function (element) { 
      element.closest('.control-group').addClass('valid').removeClass('error').addClass('success'); 
     } 
    }); 
}); 

Внимание: У меня нет кнопки отправки, связанную для этой формы, вместо этого, я использую гиперссылки (<a>) и класс button в bootstrap, чтобы создать кнопочный элемент. (Я не думаю, что это будет иметь значение).

Теперь, когда я пытаюсь ввести что-то в вышеуказанные два поля, когда вход пуст, он не выделяет соответствующие поля ввода красной рамкой мгновенно, может ли кто-нибудь сказать мне, как это сделать? Здесь я уточняю, что хочу:

Независимо от того, что пользователь вводит в первый раз, поле ввода не будет окружено красной/зеленой рамкой, чтобы показать успех или ошибку. Когда пользователь нажимает гиперссылку <a id="finalize_btn"></a>, страница html перейдет в первое недопустимое поле ввода и выделит все недопустимые поля ввода (возможно, с сообщением об ошибке). Как только пользователь правильно введет что-то, сообщение об ошибке исчезнет, ​​а зеленая рамка появится, чтобы показать успех.

Надеюсь, вы поймете мои объяснения и благодарите за любую потенциальную помощь!

Answer 1

Это не работает должным образом, потому что success является не дополнительной функцией обратного вызова для highlight.

As per documentation:

снятия выделения - Вызывается для отмены изменений, сделанных опцией highlight, те же аргументы, как highlight.

И success был терпеть неудачу, потому что он не может принять аргумент element. Опять же, в соответствии с Документами:

успеха - Если функция задана, его называют с label в качестве единственного аргумента.

Так для случая кода, Вы писали element в качестве аргумента для success, но плагин смотрит на это и интерпретирует его как имя для label.

Используйте вместо этого:

$(document).ready(function() { 
    $('#profile_form').validate({ 
     rules: { 
      firstname: { 
       required: true 
      }, 
      lastname: { 
       required: true 
      } 
     }, 
     highlight: function (element) { 
      $(element).closest('.control-group').removeClass('success').addClass('error'); 
     }, 
     unhighlight: function (element) { 
      $(element).closest('.control-group').addClass('valid success').removeClass('error'); 
     } 
    }); 
}); 

Пожалуйста, обратите внимание, что нет никаких оснований цепи нескольких экземпляров .addClass() вместе. Просто разместите несколько имен классов внутри одного .addClass().

Рабочая DEMO с цветами добавлены в классы для выразительности: http://jsfiddle.net/5tykD/