最終更新日

失われたソースファイル 11

Get Thunderbird

コピーアンドペースト用の記事

失われたソースファイル 11

ありがちなんだけど良くなくしてしまう HTMLなどの雛形を おいておく場所です。

入力フォームを JavaScript でチェックする

掲示板の入力フォーム等で空入力がないかを事前に確認する JavaScriptとHTML。また、フォーカスがあたったときに デフォルト入力を消去するスクリプトもあわせて。

まずは、FORM の HTML。

<html lang="ja">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="test.js"></script>
    <title>フォームの試験</title>
</head>

<body>

<form name="form" id="form" class="bbsform" method="post" action="./bbs.php" >
    <textarea name="message" cols="64" rows="4" onfocus="bbs_clearTextArea();">メッセージをどうぞ</textarea>
    <input type="submit" value="投稿" class="button" onClick="return bbs_checkInput();">
</form>

</body>

</html>

JavaScript。ここでは test.js。

var BBS_DEFAULT_MESSAGE = "メッセージをどうぞ";

function bbs_clearTextArea() {

// 入力しやすいようにデフォルトメッセージを削除
if(document.form.message.value == BBS_DEFAULT_MESSAGE) {
    document.form.message.value = "";
}
}

function bbs_checkInput() {

var value;

value = document.form.message.value;
value = value.replace(/¥s|¥n/g,"");

if(value == BBS_DEFAULT_MESSAGE || value == "") {
    window.alert('メッセージを入力して下さい。');
    return false;
}

return true;

}

おわり

submit ボタンの JavaScript のイベント onClick="return 関数名();"で、 true を戻すと POST。false を返すとなにもしない・・・、ということろが 面白いところです。

これらは、JavaScript が動かない環境では無効なので、 入力チェックはサーバサイドでも行って下さい。 これは、(多くの)ユーザにすぐレスポンスを返すための "便利機能"扱いです。

よくなくすので、とりあえずおいておくことにします。