掲示板/JavaScript質問板/過去ログ/一覧/ 複数の入力チェック

0 名前：あき： 2006/05/30（火） 03:17 ID:57sZXY0Y: 【何をしたいのか】
よく見かけるメールフォームの入力チェックでalertの表示で

以下の入力に誤りがあります。
お名前の入力がありません。
メールアドレスの入力がありません。
………
といった感じで、エラーの内容をまとめてalertで表示したいのですが可能でしょうか？
よろしくお願いいたします。

1 名前： Pid ◆byEkK9OALr ： 2006/05/30（火） 03:17: 可能です。

なお，alert は非常にうっとうしいので，警告を出すならページ内に出力した方が良いと思います。

2 名前：あき： 2006/05/30（火） 03:17: ありがとうございます。
ページ内に表意するには、具体的にどのようなスクリプトになりますでしょうか？
重ねてよろしくお願いいたします。

3 名前： Pid ◆byEkK9OALr ： 2006/05/30（火） 03:17

具体的なフォーム構造（部品名）が分からないと何とも言えないでございまする。

まあ，汎用化しても良いのですけどね。

var FormChecker = {
    
    // 対象にするフォーム名（id）
    targetId : 'mail-form',
    
    // 入力必須にしたい部品名とラベル
    requiredControls : [
        { name : 'name', label : 'お名前' },
        { name : 'mail', label : 'メールアドレス' }
    ],
    
    init : function () {
        var id = this.targetId;
        document.forms[id].onsubmit = function (e) {
            return FormChecker.check (this.elements);
        };
    },
    
    check : function (e) {
        var c = this.requiredControls, p, s = '';
        for (p in c) {
            if ('' == e[c[p].name].value)
                s += c[p].label + 'の入力がありません。\n';
        }
        return ! s || !! (s && alert (s));
    }
};

onload = function () { FormChecker.init (); };

即席なのでミスがあるかもしれません。また，警告の出力位置が分からないのでとりあえず alert にしておきました。あとはご自身で工夫して下さい。

4 名前： Pid ◆byEkK9OALr ： 2006/05/30（火） 03:17: >>3
check () 内訂正。
> return ! s || !! (s && alert (s));
↓
return ! s || !! alert (s);

5 名前： Pid ◆byEkK9OALr ： 2006/05/30（火） 03:17

>>3-4
load 時に一回実行してイベントリスナ追加するのに接頭辞なんぞ要らんだろとか，Array に対して for-in 回すなとか，激しく自己嫌悪に以下略。

以下は Opera でしか動作しません。

if (document.implementation
    && document.implementation.hasFeature ('HTML', null)
    && document.implementation.hasFeature ('Events', null))

/*document.*/ addEventListener ('load', function () {
    var id, required;
    
    [ id, required ] = [ 'mail-form', { 'name' : 'お名前', 'mail' : 'メールアドレス' } ];
    
    document.forms[id].addEventListener ('submit', function (e) {
        var c = e.target.elements, p, s = '';
        
        for (p in required)
            if ('' == c[p].value)
                s += required[p] + 'の入力がありません。\n';
        
        s && (alert (s) || e.preventDefault ());
    }, false);
    
}, false);

6 名前：あき： 2006/05/30（火） 03:17 ID:57sZXY0Y: ありがとうございます。
さっそく試してみます。