入力フィールドが

Question

は、私はほとんどのフォームの検証を完了し、適切に（純粋ジャバスクリプト）で満たされているかどうかの確認が、私のためにお尻の唯一の痛みは、次のとおりです。

1いくつかが満たされている時に入力フィールドは、自分自身をチェックする必要があります）入力フィールドに入力し、入力ボックスの外側をクリックします。

2）誰かがすべての入力フィールドを空のままにして送信ボタンをクリックしたとき。

どのように私はそれを修正することができますか？仕事が終わっ

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

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

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

。