verdiğin kodlarda sadece boş olup olmadığını kontrol ettiği için dolayısı ile geçerli bir mail ya da senin belirlediğin bir format olup olmadığına bakmıyor.
şu for bloğuna kendin koşullarını tek tek ekleyebilirsin

for (i = 0; i < y.length; i++) {
    // boş mu kontrol et
    if (y[i].value == "") {
      y[i].className += " invalid";
      valid = false;
    }
    
    // email mi kontrol et
    // diğer vs. aynı mantık
}

senin için jquery ile bir örnek hazırladım. bu sefer böyle kontrol etmek yerine, input'ların tipine göre kontrol işlemi yapıyor. Şöyle bir html'in olsun

<form action="" method="get">
	<div class="tab">
		<input type="text" placeholder="name" required> <br>
		<input type="text" placeholder="surname" required>
	</div>
	<div class="tab">
		<input type="email" placeholder="email" required> <br>
		<input type="phone" placeholder="phone" required> <br>
		<select name="job" required>
			<option value="">Seçin</option>
			<option value="1">Seçenek 1</option>
			<option value="2">Seçenek 2</option>
		</select>
	</div>
	<div class="tab">
		<input type="password" placeholder="password" required> <br>
		<input type="password" placeholder="password again">
	</div>
</form>
<button type="button" disabled class="prev">Önceki</button>
<button type="button" class="next" data-text="Sonraki" data-submit="Gönder">Sonraki</button>

ufakta bir css olacak

[disabled] {
	opacity: .4;
}
.error {
	border: 1px solid red;
}

ve js kodlarınsa şöyle

let tabs = $('.tab');
tabs.filter(':not(:first)').hide();

let next = $('.next');
let prev = $('.prev');

tabs.find('input, textarea, select').on('keyup input', function(e){
	$(this).removeClass('error');
});

prev.on('click', function(e){
	e.preventDefault();
	let tabIndex = $('.tab:visible').index();
	if (tabIndex > 0){
		$('.tab:visible').hide().prev('.tab').show();
		next.text(next.data('next'));
	}
	if ($('.tab:visible').index() == 0){
		prev.attr('disabled', 'disabled');
	}
});

next.on('click', function(e){
	e.preventDefault();
	
	let elems = $('.tab:visible input, .tab:visible textarea, .tab:visible select');
	let errors = false;
	elems.each(function(){
		if ($(this).is(':invalid')){
			errors = true;
			$(this).addClass('error');
		}
	});
	
	if (!errors){
		let nextTab = $('.tab:visible').next();
		if (nextTab.length == 0) {
			$('.tab').closest('form').submit(); // formu gönder
		} else {
			$('.tab:visible').hide();
			nextTab.show();
			nextTab.find('*:first').focus();
			if (nextTab.length > 0){
				prev.removeAttr('disabled');
			}
			if ($('.tab:visible').index() + 1 == $('.tab').length){
				next.text(next.data('submit'));
			} else {
				next.text(next.data('next'));
			}
		}
	} else {
		$('.tab:visible .error:first').focus();
	}
	
});

artık html'de required niteliğin varsa bu alan doldurulması zorunlu alandır. Ayrıca tipi email ise örneğin geçerli bir e-mail formatı olmadığı sürece geçersiz sayılır, tipi number ise sayı olmadığı sürece geçersiz sayılır.
Ya da html form etiketlerinde pattern diye bir nitelik var buraya kendi regex kodlarını yazabiliyorsun. Örneğin;

<input type="text" name="tc" placeholder="tc no" required pattern="[0-9]{11}">

bunu formun içine koyup test edersen 11 haneli sayı yazmadığın sürece geçersiz olacak ve sonraki adıma geçirmeyecektir.

demosu için: https://codepen.io/tayfunerbilen/pen/mdOGMEr