堀北真希うさぎ
主な作品
アイドルをモデルにした制作者の創作キャラクタのイラスト例とそれを組み込んだアニメーション動画

ページ案内▼

フォームの必須入力欄の入力を確認するスクリプト。

入力フォームの必須項目の入力欄に、何も入力せずに送出した場合、当然エラーとなります。

このエラーを送出前にチェックする事で、サーヴァに余計な負荷を与えないだけでなく、エラーメッセージを受取るために待たされると言うような事を無くす事が出来るようになります。

フォームの必須入力欄の入力を確認するスクリプト・目次。

フォームの必須入力欄の入力を確認するスクリプトのサンプル。

以下のフォームは、名前とパスワードの入力が必須となっております。

スクリプトを実行できる環境なら、どちらかを入力せずに送信ボタンを押すと、エラーダイアログが開く筈です。

認証入力
お名前
パスワード

フォームの必須入力欄の入力を確認するスクリプトのソースとHTML文書での記述。

フォームの必須入力欄の入力を確認するスクリプト「CheckIfFilled.js」は以下のようになっております。

function checkIfFilled() {
    if (document.forms[0].yourname.value=='') {
        window.alert('お名前が入力されておりません！');
        return(false);
        }
    if (document.forms[0].password.value=='') {
        window.alert('パスワードが入力されておりません！');
        return(false);
        }
    return(true);
}

一方、HTML文書側には、以下のように記述されております。

    <form action=" (略) " method="post" onsubmit="return(checkIfFilled());">
        <fieldset>
            <legend>認証入力</legend>
            <dl>
                <dt>お名前</dt>
                <dd><input type="text" name="name" size="24" /></dd>
                <dt>パスワード</dt>
                <dd><input type="password" name="pass" size="24" /></dd>
                </dl>
            <ul>
                <li><input type="submit" value="送信" /></li>
                </ul>
            </fieldset>
        </form>

スクリプトの構成。(平成17年 8月21日 更新)

スクリプトの起動。(平成17年 8月21日 修正)

スクリプトはフォームの送信ボタンが押された時に起動します。

これは、<form>要素のonsubmit属性で実現します。

onsubmit属性は、当該<form>要素の送信手続きをイヴェントとして行なうイヴェントハンドラで、この属性値となるJAVAスクリプトが実行されます。

ここでは、checkIfFilled()函数を実行した結果をreturn文で返すというだけですが、その際にエラーを見出した場合はfalse値を返して送信をやめさせます。

スクリプトの処理。

スクリプトの処理は、お名前入力フィールドとパスワード入力フィールドに文字列が入力されているかをそれぞれ確認するだけです。

実際に、フォームの指定されたフィールドに文字が入力されているかどうかを判定するには、Formsオブジェクトのプロパティを見れば分かります。

例えば、

とあるのは、HTML文書中で０番目のフォーム内の、それぞれ「yourname」「password」と言う名前の与えられた入力フィールドに入力された値を与えるプロパティです。

未入力の場合は当然、空文字列となります。

ですから、これらを順番に調べていけば良いと言う訳です。

結局、以下の処理を必要な入力フィールドに関して順番に行えば良いだけです。

    if (document.forms[0].○○.value=='') {
        window.alert('××が入力されておりません！');
        return(false);
        }

このサンプルでは、二つのフォームに関して行いますので、二回繰返される事になります。

実際に調べたプロパティが空文字列の場合は、window.alertメソッドでエラーメッセージを出して、更に「return(false);」文を実行してファーム送信を中断させます。

全ての入力フィールドの確認が終わって、漸く、

が実行されます。

この場合に限って、フォーム送信手続きが続行される事となります。

しらぎくのウェブサイト作成入門サイトマップ

marguerite.site@gmail.com