Как сделать валидацию пошаговой формы?

Question

[realt]

Здравствуйте. Есть такая пошаговая форма codepen.io/Imapo/pen/wGVbaJ
Проблема в том, что если в форму Вы ничего не впишете и нажмете на кнопку - "вперед" - форма переключается дальше, хотя НЕ должна до тех пор пока первый этап не заполнен! Я пробовал поставить атрибут required в импуты, но это не помогло.
Помогите пожалуйста решить проблему кто может :(

Answer 1

[Денис]

Вот, например, как можно проверять - заполнены ли все поля или нет.

$(".next").click(function() {
    current_fs = $(this).parent();
    var hasEmpty = $('input', current_fs).css('border-color', '#ccc').filter(function() {
        return $.trim($(this).val()) === '';
    }).css('border-color', '#f00').length;
    if (hasEmpty) {
        alert('А заполнять поля за тебя Пушкин будет?');
        return false;
    }
    // Остальной код обработчика
});

Проверку по каждому отдельному полю, с учетом необходимых требований (формат Email, кол-во символов и т.д.) - это уже сами.

Comments

[realt]

круто, спасибо))

[Денис]

realt не за что, но ничего крутого тут и в помине нет ))

Answer 2

[Cyber_bober]

Поставьте обработчик на кнопку вперед или проверяйте поля «на лету»

Comments

[realt]

Подскажите пожалуйста как это сделать, я нуб в js :(