from 和ジオ

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

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

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

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

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

入力フォームを 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 が動かない環境では無効なので、入力チェックはサーバサイドでも行って下さい。これは、（多くの）ユーザにすぐレスポンスを返すための "便利機能"扱いです。

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