Проверка формы jquery с вкладками и пользовательскими сообщениями об ошибках

Question

Я использую http://bassistance.de/jquery-plugins/jquery-plugin-validation/ для проверки формы.

Моя форма разбита на различные вкладки.

Последняя вкладка - это моя кнопка отправки формы. Теперь проверки проверки достоверности, похоже, работают, однако проверка всегда возвращается к полю, которое отсутствует для завершения.

Я предпочел бы просто вывести свое сообщение об ошибке над кнопкой отправки, чтобы пользователь вернулся к соответствующей вкладке и заполнил поле.

Вот код, я использую

var errcontainer = $('.errcontainer'); 
$("#application-submit").click(function() { 
     $("#application-form").validate({ 
     debug: true, 
     rules: { 
      student_lastname: "required" 
     }, 
     errorContainer: errcontainer, 
     errorLabelContainer: $("ol", errcontainer), 
     wrapper: 'li', 
     meta: "validate" 
    }); 
}); 

http://jsfiddle.net/F2HNh/

сообщение об ошибке выводится, если отключить вкладки, но когда я включаю их, я ничего не получаю.

Любые предложения?

Спасибо.

Answer 1

Как и любой другой плагин jQuery, вы должны инициализировать его на DOM ready. Нет необходимости ставить .validate() внутри обработчика кликов. Если вы просто хотите, чтобы он проверял достоверность формы на кнопке отправки, она уже делает это по умолчанию.

$(document).ready(function() { 
    $("#application-form").validate({ 
     debug: true, // <-- this will block a real submission 
     rules: { 
      student_lastname: "required" 
     }, 
     errorContainer: errcontainer, // <-- errcontainer not defined or a valid selector. 
     errorLabelContainer: $("ol", errcontainer), // <-- errcontainer not defined or a valid selector. 
     wrapper: 'li', 
     meta: "validate" // <-- this is not a documented option 
    }); 
}); 

Я не уверен, что вы хотели с meta: "validate" ... it's not a documented option.

Также не указаны ваши errorContainer: и errorLabelContainer:. As per the documentation and examples, errorLabelContainer: is ", как указано селектором, прошедшим как errorContainer вариант". errcontainer не является допустимым селектором и не является определенной переменной.

То же самое с errorLabelContainer:, $("ol", errcontainer) не является допустимым выбором.

Оба из этих вариантов, как вы определили их, вызвать плагин на неудачу с ошибками: http://jsfiddle.net/5JRNV/

Если вы не хотите, чтобы сосредоточиться на первое недействительного поля, используйте опцию focusInvalid: false.

$(document).ready(function() { 
    $("#application-form").validate({ 
     focusInvalid: false, 
     rules: { 
      student_lastname: "required" 
     }, 
     // other options. 
    }); 
}); 

Стандартные Демо: http://jsfiddle.net/5G5PT/

Answer 2

Попробуйте переходящий в игнорировать вариант с пустым массивом

$('form').validate({ 
// your other options  
ignore:[] 
}); 

Если сообщения об ошибках показываются в вашем errorLabelContainer перед включением вкладки, но не отображаются после этого, это может быть связано с тем, что ошибки находятся в скрытых полях, которые по умолчанию не проверяются.