Checking if the input fields are filled in properly (pure javascript)

Question

I almost complete the form validation, but the only pain in the ass for me is:

1) Input fields should be checked themselves when some have filled in the input field and click outside the input box.

2) when someone leaves all the input fields empty and clicked on the send button.

Anyone an idea how I can fixed that?

function validateForm() {
	var name = document.getElementById("name");
	var email = document.getElementById("email");
	var nameValidation = document.getElementById("nameValidation");
	var emailValidation = document.getElementById("emailValidation");
	var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

	if (name.value.length == "") {
		nameValidation.innerHTML = " Please fill in your name";
		name.focus();
	} else {
		nameValidation.innerHTML = " Right";
	}
	
	if(!filter.test(email.value) || (email.value.length == "")) {
		emailValidation.innerHTML = " Please enter a valid email address";
		email.focus();
	}
	else {
		emailValidation.innerHTML = " Right!";
	}
}

<form action="#" id="form" method="post" name="form">
    <img id="close" src=IMAGE/close.png alt="close-button" onclick="div_hide()"/>
    <h3><b>Application form</b></h3>
    <input id="name" class="application" name="name" placeholder="Name" type="text" maxlength="30" /><span id="nameValidation"></span><br/>
    ><input id="email" class="application" placeholder="Email" type="text" maxlength="254" /><span id="emailValidation"></span>

    <div id="upload-box">
      <input id="upload" class="application upload" type="file"/>
      <input id="submit" class="application apply-button" type="button" onclick="validateForm()" value="Send"/>
    </div>
  </form

Answer 1

<input type="email" required />

Job done.