Плагин проверки JQuery - проблема выделения ошибок - PullRequest
Новая
       17

Плагин проверки JQuery - проблема выделения ошибок

4 голосов
/ 10 ноября 2009

У меня есть форма с двумя входными текстовыми полями, и я включил правила проверки jQuery для обоих: 

<script src="../../Scripts/jquery-validate/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
    $('#respondForm').validate({ onclick: false,
      onkeyup: false,
      onfocusout: false,
      highlight: function(element, errorClass) {
        $(element).css({ backgroundColor: 'Red' });
      },
      errorLabelContainer: $("ul", $('div.error-container')),
      wrapper: 'li',
      rules: {
        'text': {
          required: true,
          minlength: 5,
          maxlength: 10
        },
        integer: {
          required: true,
          range: [0, 90]
        }
      },
      messages: {
        'text': {
          required: "xxx_Required",
          minlength: "XXX Should be greater than 5",
          maxlength: "XXX Cannot be greater than 10"
        },
        integer: {
          required: "is required",
          range:  "is out of range: [0,90]"
        }
      }
    });
  });
</script>
</head>
.
.
.
<input type="text" id="text" name="text" />    
<br />
<input type="text" id="integer" name="integer" />
<br />
<input type="submit" name="submit" value="Submit" />
<br />

Я использовал: 

function(element, errorClass) {
  $(element).css({ backgroundColor: 'Red' });
}

, чтобы выделить контроль ошибок. Теперь проблема в том, что в следующем сценарии оба поля ввода остаются выделенными (цвет фона: красный):

  1. Введите текст длиной менее 5 символов в текстовое поле 1
  2. Оставьте текстовое поле 2 пустым
  3. Хит отправить
  4. Фон обоих текстовых полей будет изменен на красный (это правильно)
  5. Теперь введите текст, содержащий 6 символов, в текстовое поле 1 (допустимый ввод)
  6. Оставить текстовое поле 2 пустым
  7. Хит отправить
  8. Цвет фона для обоих текстовых полей остается красным. Где, как ожидается, цвет фона текстового поля 1 не должен быть красным

Как мне решить эту проблему?

Ответы [ 2 ]

13 голосов
/ 16 ноября 2009

Найдя ответ, вы также должны предоставить unhighlight свойство.

Добавляет класс ошибки как к недопустимому элементу, так и к его метке 

$(".selector").validate({
  highlight: function(element, errorClass) {
     $(element).addClass(errorClass);
     $(element.form).find("label[for=" + element.id + "]")
                    .addClass(errorClass);
  },
  unhighlight: function(element, errorClass) {
     $(element).removeClass(errorClass);
     $(element.form).find("label[for=" + element.id + "]")
                    .removeClass(errorClass);
  }
});

Подробнее

2 голосов
/ 13 ноября 2009

Функция, которую вы использовали для выделения элемента управления ошибками, устанавливает для свойства css backgroundColor значение 'red', используя функцию jQuery.css(), которая помещает правило в атрибут style элемента. Если у вас нет другой функции обратного вызова, которая сбрасывает фон элемента на inherit с помощью функции jQuery.css() или иным образом переопределяет / удаляет правило в теге стиля, тогда правило останется на месте, а элемент формы будет продолжать иметь красный фон.

Что вам действительно нужно сделать, так это установить фон для элемента формы косвенным образом, применив к нему правило класса css (Предполагается ли, что аргумент errorClass для вашего обратного вызова должен быть именем класса css для применения в случае ошибки? должен использовать это). Таким образом, когда форма отправляется, вы можете легко сбросить ее внешний вид и выполнить повторную проверку: 

$('#theForm .errorClassName').removeClass('errorClassName');
$('#theForm').validate();
...