入力必須項目チェック、これまえJavaScriptで行っていました。調べたところ、HTML5でrequiredという属性が導入されていたようです。
required属性を書いておけばsubmit時、ブラウザが入力済みかどうかをチェックしてくれます。入力済みでなければ入力を促して送信は行われません。
type="email"のinputで、requiredの代わりにmultipleと記載しておくとメールアドレスをスペース区切りまたはカンマ区切りで複数指定してもらうことが可能です。
何も入力がない場合、または正しいメールアドレスが複数並んでいる場合にvalidと判定されます。CCメールアドレスを指定して貰う欄なんかは良いですね。requiredと合わせて指定することで「1つ以上」のメールアドレスを入力必須とすることも出来ます。
また、:invalid疑似クラスを使うことで必須項目が入力されていない際のスタイルを指定することもできます。
JavaScriptで.required=true/falseとすれば動的に入力必須/不要をトグルすることもできます。
ただし、HTML要素的には属性の存在の有無で入力の要/不要が決まるため、required=”false”と書いても入力不要にはなりません。
また、技術的に入力漏れを確実に防ぐものではありません。古いブラウザや、機械的な手段で入力が漏れる可能性はあるため、ロジック上必要な項目についてはサーバサイドでのチェックは引き続き必要です。
動作をざっと把握できるコードは以下のようになります。
<style>input:invalid{background-color:#ffebeb;}</style>
<form>
<label for="name">名前</label><input type="text" id="name" name="name"/>
<label for="email">メールアドレス</label><input type="email" id="email" name="email" required/>
<label for="emailmulti">メールアドレス(複数)</label><input type="email" id="emailmulti" name="emailmulti" multiple/>
<input type="submit" value="送信"/>
</form>
<button onclick="document.getElementById('name').required=true">名前を入力必須にする</button>
<button onclick="document.getElementById('name').required=false">名前を入力必須では無くする</button>動作するサンプル: