JQuery добавить / удалить необходимый класс для проверки перед отправкой формы

Question

У меня есть форма со многими полями, в которых два из этих полей являются своего рода взаимоисключающими, т. Е. Если одно пустое, другое должно присутствовать , а обратное верно (но они могут присутствовать одновременно).У меня есть простая проверка проверки перед отправкой, которая просматривает все поля с class="required" (без плагина), поэтому я реализовал следующий код для проверки одного поля или другого :

$('#field1').keyup(function(){
  if ($(this).val().length > 0) {
    $('#field2').removeClass('required');
    $(this).addClass('required');
  }      
});

$('#field2').keyup(function(){
  if ($(this).val().length > 0) {
    $(this).addClass('required');
    $('#field1').removeClass('required');
  }
});

где #field1 и #field2 - два взаимоисключающих поля.

Я проверил с помощью Firebug, и классы правильно добавлены / удалены.

Проблема в том, что:

если я вызову одно или другое поле, моя форма будет отправлена ​​, даже если другие обязательные поля будут оставлены пустыми .

Код проверки:

$('form').submit(function(){
var fields = $('.validate');
var ret_value = true;
$.each(fields, function(){
  if ($(this).find('.required').val().length < 1) {
    $(this).find('.errors').html('Campo obbligatorio!');
    ret_value = false;        
  }      
});
return ret_value;

});

, где html обязательного поля ввода:

<span class="validate">
   <label for="field">Required Field</label>
   <input name="field" id="field" class="required">
   <span class="errors"></span>
</span>

Проверка формы выполняется правильно, еслиЯ не добавляю / не удаляю класс required с кодом выше.

Если я установил точку останова в Firebug, где я установил, что код

ret_value = false;

выполняется, но по какой-то причинеон никогда не доходит до

return ret_value;

Кроме того, проверяя переменную fields в Firebug, я вижу правильные записи.

Как я уже говорил, если я не изменяю #field1 и #field2, все работает правильно.

Чего мне не хватает?

Answer 1

Проблема в том, что может произойти сбой при следующих условиях:

if ($(this).find('.required').val().length < 1)

если не удается найти элементы с требуемым классом, то .val () возвращает undefined для [], а .length для undefined скрывается.

Один из способов решить эту проблему - изменить проверяемые поля, чтобы проверять только дочерние элементы класса проверки с требуемым классом.

Так что вы бы изменили:

var fields = $('.validate');

до:

var fields = $('.validate > .required');

и ...

$.each(fields, function(){
  if ($(this).find('.required').val().length < 1) {
    $(this).find('.errors').html('Campo obbligatorio!');
    ret_value = false;        
  }      
});

до:

$.each(fields, function(){
  if ($(this).val().length < 1) {
    $(this).siblings('.errors').html('Campo obbligatorio!');
    ret_value = false;        
  }      
});