感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

inputのtype属性を使って入力値の妥当性を検証する。独自のエラーメッセージを設定する方法。

スポンサーリンク

読書

ジョーンズはピーターフィーの取引量がとても多いことを知っていた。どうやったらあれだけのボリュームがこなせるんだ?
誰があれだけ大量の注文を入れているのか?
「これだけか?」とジョーンズは詰め寄った。
「トレーダーたちはどこにいる?」

「これだけです。すべてがここに集約されています」とピーターフィーは答え、IBM社製のコンピュータを指さした。

アルゴリズムが世界を支配する』より

type="email"

フォームにメールが入っていることを保証するためのHTMLは以下の通り。

<body>
<form name="myForm">
email:<input type="email" name="myEmail" /> 
<input type="submit" />
</form>
</body>

このように、type="email"を記載すると、送信ボタンを推したときに妥当性(本当にメールアドレスかどうか)が検証されて、画像のような注意書きが表示される。
f:id:sho322:20131029222548p:plain

type="number"

フォームに入力される数字がある一定の範囲であることを検証するためには、以下のようにHTMLを書けばいい。

<form name="myForm">
<input type="number" name="myNumber" min="3" max="15" value="10" />
<input type="submit" />
</form>

見てもわかるように、minが最小値、maxが最大値になる。
これを違反すると、画像のように警告が表示される。
f:id:sho322:20131029222559p:plain

妥当性の違反メッセージを独自に設定する。

HTML5のリファレンスにもあるように、妥当性のメッセージは以下のsetCustomValidity(message)メソッドを使うことで独自に設定することができる。

element.setCustomValidity(message)
独自エラーをセットします。elementはバリデートに失敗するでしょう。
指定のmessageは、ユーザーに問題を報告するときに表示されます。
引数が空文字列なら、独自エラーはクリアされます。
http://www.html5.jp/tag/elements/forms-constraints.html

自分でテキストフォームの値を検証して、独自のエラーメッセージを出してみるサンプル。

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form name="testForm">
私のことどう思う?:<input type="text" name="mine" value="普通" oninput="updateMessage(this)"/>
<input type="submit" />
</form>

<script>
document.testForm.mine.setCustomValidity("「イケメン」以外認めません");
function updateMessage(input) {
  if (input.value != "イケメン") {
    
  } else {
    input.setCustomValidity('');
  }
}
</script>
</body>
</html>

これを送信しようとすると、画像のようなエラーメッセージが表示される。
f:id:sho322:20131029222609p:plain
イケメン以外許さないというやつだ。
これくらいの潔さが大切なんだ。

今日勉強した本

HTML5 Hacks ―インタラクティブWebアプリケーションのためのテクニック

HTML5 Hacks ―インタラクティブWebアプリケーションのためのテクニック

最後独自メッセージのところはサンプル通りではうまくいかず、色々と苦戦した。
苦戦したとはいえ、やはり知らなかったことを学べるあたり、Hacksシリーズは素晴らしい。

感謝のプログラミング

今回で感謝のプログラミングは【689時間目】
10000時間まで、あと【9311時間】