Как проверить заполнены ли поля формы и показать статус полей?

Question

[Игорь Че]

Есть форма с 30 полями.
Пытаюсь сделать проверку на заполненность этих полей. С отображением статуса "Заполните поля калькулятора", если не все поля заполнены, и "Нажмите "Рассчитать"", когда все поля заполнены. Статус должен показываться до клика на Submit.
Пытаюсь сделать так:

$('#myform').bind('mouseover change', function() {
	$('#myform input').each(function(){
	    	if ($(this).val() == '') {
	    		$('#result').html('Некорректные значения'); 
	    	}
	    	else {
	    		$('#result').html('Все поля заполнены'); 
	    	}
	});
});

Но при этом проверяется только последнее поле в форме. Как сделать чтобы все поля проверялись?

Answer 1

[Игорь Че]

Всем спасибо за советы. Но это не то. Сделал так:

$('.calc-form, #open-calc div.open', context).bind('mouseover change', function() {
	var is_correct = 0;
	$('.calc-form .field input', context).each(function() {
     	is_correct += parseInt($(this).val());
     	if (isNaN(is_correct) == false) {
    		$('.calc-form .status').html('Нажмите «Рассчитать» для сравнения');
     	}
     	else {
     		$('.calc-form .status').html('Заполните поля калькулятора');
     	}
	});
});

Answer 2

[Bowen]

Простой пример

Answer 3

[coderisimo]

а если вот так :

var all_form_inputs =  document.forms["имя вашей формы"].getElementsByTagName("input");

на JQuery

var $inputs = $('#myForm :input');
    $inputs.each(function() {
    //  вот значение каждого поля $(this).val();
    });

Comments

[Игорь Че]

И что с этим делать?
Еще мне нужно не все поля проверять. Есть набор полей с одним классом и набор с другим классом. В одном наборе все поля должны быть заполнены, в другом не обязательно.

[coderisimo]

Используйте составные селекторы.
var $inputs = $('#myForm.CLASS_DLYA_PROVERKI :input');

PS Я пытаюсь дать вам ключи к тому чтобы самому разобраться , а вы "И что с этим делать?"
Я не понял, вам нужен готовый скрипт? С этим не сюда.

Answer 4

[Кирилл Нефедьев]

$("form button,form input[type='button'],input[type='submit']").on('click',
                    function(t) {
                        var test = true;
                        var selecter
                        if ($(this)[0].form) {
                            selecter = $(this)[0].form
                        } else if ($(this).attr('form')) {
                            selecter = $('form[name=' + $(this).attr('form') + ']')
                        } else {
                            console.warn('где форма?')
                            return true;
                        }
                        $(selecter).find('input[required]').each(function(index, element) {
                            let x = $(element).val()
                            if (x === false || x == '' || x == 'undefind') {
                                // console.log('X')
                                test = false
                                var tooltip = $('<span>', {
                                    css: {
                                        'width': 'fit - content',
                                        'z-index': 9999,
                                        'background': '#b5b5b5bd',
                                        'color': '#20272F',
                                        'padding': '5px',
                                        'border-radius': '2px'
                                    },
                                    html: '<i class="fas fa-exclamation-circle" style="color:gold;"></i> Не заполнено поле'
                                }).appendTo('body');
                                $(tooltip).offset({
                                    top: $(element).offset().top - $(element).height() - 7,
                                    left: $(element).offset().left
                                })
                                $(tooltip).fadeOut(0).fadeIn(500)
                                setTimeout(() => {
                                    $(tooltip).fadeOut(500)
                                    setTimeout(() => {
                                        $(tooltip).remove()
                                    }, 500);
                                }, 2500);

                            } else {
                                // console.log('O')
                            }
                        });
                        if (test) {
                            eval($(t.currentTarget).attr('data-click'))
                        }
                    }
                )

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