#・初めに
この記事は以下の方を対象としています。また、記事修正のコメントや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で行う基本的な方法についてみていきます。
###コード
簡単に以下のコードを用意しました。
~~
<form>
<label for="choose">Which do you like banana or apple?</label>
<input id="choose" name="i_like">
<button>Submit</button>
</form>
~~
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