jQuery проверять с несколькими входами

Question

Есть много людей, задающих аналогичный вопрос, но все ответы за одно сообщение об ошибке, которое встроено в API.

.validate({ 
    groups: { 
     birthday: "month day year" 
    }, 

Пожалуйста, проверьте этот jsfiddle http://jsfiddle.net/atLV4/36/

Если вы отправляете, не запуская ничего, все элементы получают класс ошибок. Когда вы заполните форму, вы можете обновить только один элемент, отменить выбор, и сообщение об ошибке исчезнет, ​​даже если другие элементы не были обновлены. Кроме того, граница исчезает, как только вы обновляете выбор, который вызывает прыжки. Я хочу, чтобы проверка выполнялась только после того, как были выбраны все 3 входа.

Answer 1

К сожалению, похоже, что jQuery Validate не имеет встроенной функции onchange, в которой вы хотели бы разместить это для своих 3-х избранных. Вместо этого вы хотите отключить проверку onfocusout и onclick, а затем добавить внешнее событие change для 3 выборок, которые запускают проверку после заполнения всех 3. Для вашего кода валидации, вам это нужно:

//save the validate object to use later! 
    var $validate = $("#commentForm").validate({ 
     onfocusout: false, 
     onclick: false, 
     groups: { 
      birthday: "month day year" 
     }, 
     errorPlacement: function (error, element) { 
      var name = element.prop("name"); 
      if (name === "month" || name === "day" || name === "year") { 
       error.insertAfter("select[name='year']"); 
      } else { 
       error.insertAfter(element); 
      } 
     } 
    }); 

И тогда вам также понадобится обработчик изменения событий:

//I'm using generic selectors here, but you may need to specify the 3 of interest 
$('select').change(function() { 
    if ($('select:filled').length == 3) { 
     $('select').each(function() { 
      $validate.element(this); 
     }); 
    } 
}); 

$validate.element() это функция, которая на самом деле проверяет, что они передают правила и обновления их границ и сообщений об ошибках. Проверка на $('select:filled') просто короткая для подтверждения того, что все 3 выбора имеют значение.

Рабочий пример здесь: http://jsfiddle.net/atLV4/41/