0

タイトルが説明不足で申し訳ありません、説明が難しいです。

だから私は簡単なサインアップページを持っていて、ユーザー名の長さなどをチェックしたり、パスワードが一致していることを確認したりする一連の関数をコードに作成しました.

問題は、ユーザー入力に複数のエラーがある場合、下部に 1 つのエラーしか表示されないことです。

JSfiddle はこちら: http://jsfiddle.net/LCBradley3k/xqcJS/19/

Javascript:

$('#join').on('click', function () {

    var correct = true;

    $('input[type="text"], input[type="password"]').each(function (indx) {
        var $currentField = $(this);
        if ($currentField.val() === '') {
            $currentField.addClass('empty');
            correct = false;
            $currentField.one('keydown', function () {
                $currentField.removeClass('empty');
            });
        } else {
            $currentField.removeClass('empty');
        }


    });

    function userLength() {
        var x = $('input[name="user"]').val();
        if (x.length < 6) {
            $('#answer').html('Less than six characters.');
            $('input[name="user"]').addClass('empty');
            return false;
        } else {
            return true;
        }
    }

    function passwordCheck() {
        var x = $('input[name="password"]').val();
        var y = $('input[name="passwordcheck"]').val();
        if (x === y) {
            return true;
        } else {
            $('#answer').html('Two different passwords');
            $('input[name="password"], input[name="passwordcheck"]').addClass('empty');
            return false;
        }

    }


    function validateForm() {
        var x = $('input[name="email"]').val();
        if (x.indexOf('@') !== -1 && x.lastIndexOf(".") !== -1) {
            return true;
        } else {
            $('#answer').html('Not a valid email');
            $('input[name="email"]').addClass('empty');
            return false;
        }
    }

    if (correct) {
        if (userLength()) {
            if (passwordCheck()) {
                if (validateForm()) {

                    $('#answer').html('Thank You!');
                    setTimeout(function () {
                        $('.inputs').hide("slide", {
                            direction: "up"
                        }, 1000);
                    }, 2000);
                }
            }
        }
    } else {
        $('#answer').html('Please fill highlighted fields.');
    }
});

それらのすべてが #('#answer') div を .html() で編集していることがわかります。ただし、エラーが複数ある場合は 1 つしか表示されません。そのエラーを修正してボタンを押すと、次のエラーが表示されます。それらをすべてリストに表示したい。

4

2 に答える 2

1

やりたいことをする上で2つの問題があります。

ifまず、ネストされたステートメントが原因で、最初のチェックに合格した場合にのみチェックを続行します。

次に、#answerhtmlをメッセージに置き換えます。つまり、各チェックを実行しても、最後のチェックの結果のみが表示されます。

簡単な修正は、ifステートメントのネストを解除し、全体的なパス状態を追跡する変数を保持することです。次に、を使用する代わりに、を使用し.html()ますが、チェックを開始する前に.append()必ずクリアしてください。#answer

correct &= checkFilled();
correct &= userLength();
correct &= passwordCheck();
correct &= validateForm();

if (correct) {
    // ...
}

フィドル： http： //jsfiddle.net/jtbowden/9cFKW/

注：このメソッドでより適切に機能するように、フォームに入力された独自の関数をチェックしました。

配列にエラーメッセージをプッシュし、最後に配列のエラーをチェックしてすべてのメッセージを追加するなど、さらに凝ったことを行うことができますが、これで開始できます。

于 2013-03-07T19:47:54.010 に答える
1

役立つかもしれないフィドルを作成しました。アイデアは、次のようにエラーを含む配列を作成することです。

var errors = [];
errors.push("Error 1");
errors.push("Error 2");

検証を進めると、エラーが発生するたびに、単にpushエラー文字列を配列に追加します。検証が終了したら、$('#answer')要素に追加できるように、これらのエラーを html にコンパイルする必要があります。この場合、項目は順序なしリストにコンパイルされます。これは、ニーズに合わせて変更できます。

var content = "<ul>";
for(var a = 0, len = errors.length; a < len; a++) {
    content += "<li>" + errors[a] + "</li>";   
}
content += "</ul>";
$('#answer').html(content);

html は動的に構築され、変数に格納されますcontent。content次に、エラーを表示する html 要素に追加されます (あなたの場合はanswer)。

于 2013-03-07T19:35:21.170 に答える