スポンサーサイト





上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

タグ :

   印刷ボタン       この記事に拍手する       このエントリーをはてなブックマークに追加

Return to page top

  • Comments (Close): -
  • TrackBack (Close): -

空白だったらエラーメッセージ

  • Posted by: javascriptmania
  • 2011-06-05 Sun 21:36:27
  • フォーム




テキストボックスに入力しなかったら「データを入力してください」とダイアログが出る、よくあるフォームの手法について書きます。

<html>

<head>

<script type="text/javascript">
<!--

function blank_alert() {
if(document.form_name.text_name.value==""){
alert("データを入力してください");
}

}

// -->
</script>

</head>

<body>

<form name="form_name">

<input type="text" name="text_name" onblur="blank_alert()">

<input type="button" value="click">

</form>

</body>

</html>


単なるif文といえばそれまでですが、「xが空白」という構文は

x==""

と記述します。

イベントハンドラは、フォーカスが外れたときに発動するonblurにしました。

今度は、テキストボックスにid属性をつけ、getElementById()メソッドで値を取得し、それが空白だったら「データを入力してください」と赤字でエラーメッセージを表示してみます。

<html>

<head>

<script type="text/javascript">
<!--

function blank_alert() {
var txt=document.getElementById("text_name");
var error=document.getElementById("error");
if(txt.value==""){
error.style.color="red";
error.innerHTML="データを入力してください";
}
}

// -->
</script>

</head>

<body>

<form name="form_name">

<input type="text" id="text_name" onblur="blank_alert()">

<input type="button" value="click"> <span id="error"></span>

</form>

</body>

</html>


詳しくはDOMを勉強してからでないと理解が難しいと思いますが、getElementById()メソッドとinnerHTML属性を使うやり方のほうがスマートではあります。

関連記事

タグ :

   印刷ボタン       この記事に拍手する       このエントリーをはてなブックマークに追加

Return to page top

Comments:

Comment Form
Only inform the site author.

Trackback+Pingback:

TrackBack URL for this entry
http://javascriptmania.blog111.fc2.com/tb.php/59-d9797b94
  • 閉じるボタン
月別アーカイブ
リンク
カテゴリ
RSSリンクの表示
QRコード
QR
最新コメント
最新トラックバック
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。