javascript - 检查输入字段是否填写正确(纯javascript)

Question

我几乎完成了表单验证，但对我来说唯一的痛苦是:

1) 当某些输入字段已填写并在输入框外部单击时，应自行检查输入字段。

2) 当有人将所有输入字段留空并单击发送按钮时。

有人知道我该如何解决这个问题吗？

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 />

工作完成。