Пытаюсь сделать выделение незаполненных полей?

Question

[Error420]

При нажатие на кнопку отправить код срабатывает( все поля подсвечиваются ) ,но всего лишь на долю секунды. И все что находится в событии срабатывает на долю секунды. Пробовал вешать на кнопку событие onclick ,но получается тоже самое.

<style>
		.err{
			outline: 3px solid yellow; 
		}
	</style>


<form >
	<input type="text" class="check" placeholder="Имя"><br>
	<input type="text" class="check" placeholder="Фамилия"><br>
	<input type="text" class="check" placeholder="Телефон"><br>
	<input type="submit" >

</form>

НАЧАЛО JAVASCRIPT

window.onload = function (e) {
	
	var inputs = document.querySelectorAll('.check');
	document.querySelector('form').onsubmit = function () {

		for(var i = 0;i < inputs.length; i++){
			if (inputs[i].value == "") {
				inputs[i].classList.add('err');
			}

		}
	}
}

Answer 1

[bqio]

Скорее всего ваша страница обновляется и все стили сбрасываются до стандартных.

prevent​Default

Answer 2

[hzzzzl]

можно еще через css подсвечивать еще до того как форма послана
https://codepen.io/anon/pen/YMerzw