適当メモ - maple4estry -


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

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

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

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

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

まずは、FORM の HTML。

<html lang="ja">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
    <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 が動かない環境では無効なので、 入力チェックはサーバサイドでも行って下さい。 これは、(多くの)ユーザにすぐレスポンスを返すための "便利機能"扱いです。

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