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

Question

[GiveMeUrKnowledge]

Делаю небольшой квиз, проблема заключается в том, что форма "отправляется" в любом случае. Как только не пробовал делать уже. Если делать через return false, то красится только одно не заполненное поле( которое первое попадется).

Для пример скину фидл, чтоб было более наглядно.
https://jsfiddle.net/7xgy9650/

Задумка что при клике на кнопку, если форма не валидна, будет писаться сообщение, если все норм, то в консоль выводить, о том отправка сделана или доделаю переход, на следующую страницу квиза...

Answer 1

[ZB Venom]

Самый простой способ тут
UPD
Либо так:

Comments

[GiveMeUrKnowledge]

Спасибо огромное. Решение то что надо. На счет required знаю, но мне еще валидацию надо сделать.

Answer 2

[twobomb]

Во первых для отправки формы используйте button типа submit
<button type="submit" id='btn'>Отправить</button>
Во вторых вешайтесь на событие формы submit это отправка и preventDefault для отмены
типа

document.querySelector("#form").addEventListener("submit",function(e){	
  let isValid = true;
  	 //Какие-то проверки
    if(!isValid)
    	e.preventDefault();//отмена
  });

Comments

[GiveMeUrKnowledge]

Спасибо. Про обработку на submit знаю, просто в моем случае квиз состоит из нескольких страниц и этот вариант не совсем подходит. Наверно я не совсем понятно расписал.