・初めに

この記事は以下の方を対象としています。また、記事修正のコメントやLGTMなどモチベーションにつながるのでポチっとお願いします‼

Forms validationsについて知りたい方
初学者の方
フロントエンドエンジニア志望の方

・導入

閲覧ありがとうございます。この記事は、初学者がフロントエンド目指してロードマップに沿ってアウトプットしていく記事になります。
こちらの記事はPart4です。最初からご覧になりたいかたは、以下よりどうぞ。

・記事一覧

part1: Internet【HTTP,Browsers】
part2: Internet【DNS,Domain,Hosting】
part3: HTML【basics】

・Part4 HTML【Forms validationos】

Forms validationsとは

データをサーバーへ送信する前に、フォームに入力された情報が正しく入力されているかを検証(validation)することを、クライアント側で行われるフォームバリデーションといいます。
フォームバリデーションには、ブラウザーで行われる検証であるクライアント側検証と、サーバー側で行われるサーバー側検証がありますが、今回はクライアントサイドの話をまとめていきたいと思います。

例えば、有名なサイトの登録フォームに行きフォームに入力漏れがあると、次のようなメッセージが表示されることがあると思います。これはフォームバリデーションによって表示されています。

・「このフィールドは必須です」
・「有効なメールアドレスを入力してください」
・「パスワードは 8 文字から 30 文字の間で、1 文字以上の大文字、記号、数字を含む必要があります。」

なぜフォームバリデーションが必要かというと、1つはユーザーが正しい情報を入力しない場合、ユーザーのデータが誤った形式で保存されたり、アプリケーションが正しく動作しないことがあるため。2つ目はユーザーのデータを保護することにつながるため。そして3つ目は、保護のないフォームを悪用して、そのフォームを一部に持つアプリケーションに不正アクセスする方法がたくさんあるためです。
まとめると、フォームバリデーションはユーザーの操作のしやすさがあがるだけでなく、通信を保護することができるなど、多くのメリットがあるということが言えます。

validationの方法

form validationの方法はいくつかあります。こちらは丸暗記というよりは、使うときになったら調べるスタンスでいいと思います。今回はHTMLで行う基本的な方法についてみていきます。

コード

簡単に以下のコードを用意しました。

hoge.html

~~
<form>
  <label for="choose">Which do you like banana or apple?</label>
  <input id="choose" name="i_like">
  <button>Submit</button>
</form>
~~

foo.css

input:invalid {
  border: 2px solid red;
}

input:valid {
  border: 2px solid black;
}

このコードは、好きな果物をbananaかappleから選べる入力欄です。単純なテキストの<input>とそれに合わせたラベル、送信の<button>から成ります。送信が成功なら、cssのinput:validクラスが適用され、失敗なら、input:invalidクラスが適用されます。

HTMLのrequred属性を使用する

required属性は、使うのが簡単なHTMLのバリデーション機能です。入力欄を必須にしたい場合はこの属性を使用します。

<form>
  <label for="choose">Which do you like banana or apple?</label>
  <input id="choose" name="i_like" required>
  <button>Submit</button>
</form>

input:invalid {
  border: 2px solid red;
}
input:invalid:required {
  background-image: linear-gradient(to right, pink, lightgreen);
}
input:valid {
  border: 2px solid black;
}

この CSS によって、入力が妥当でない場合には、入力を赤線で境界線を描きますが、入力が妥当な場合には、黒線で境界線を描きます。要求された値があり、値が妥当でないときは背景にピンクとライトグリーンのグラデーションを追加します。何も入力されないときは、デフォルトのエラーメッセージ(「このフィールドは入力必須です。」) が表示され、フォームの送信を阻止します。

まとめ

今回は、簡単なフォームバリデーションの使用方法と、バリデーションについてまとめていきました。バリデーションの方法はこのほかにもJavascriptを使用した方法や、正規表現を使用した方法があります。
また、Formのテンプレートやコードは多く公開されていますので、調べてみると勉強になるかもしれません。

次回予告

ここまで、Forms validationsついて書いてきました。次回はConventions and Best Practices(HTMLの従うべき慣習)についてです。次回もよろしくお願いします。

参考文献

MDN Web Docs

フォームバリデーション（Forms validations）について解説してみた。