2

環境

  • Mozilla Firefox 20.0.1
  • jQuery1.7.1

私は検証関数のセットを持っています:

var firstName = $('#FirstName'),
    lastName = $('#LastName'),
    dateOfBirth = $('#DateOfBirth'),
    city = $('#City'),
    phone = $('#Phone'),
    email = $('#Email'),
    insType = $('#InsType'),
    otherInsType = $('#OtherInsType'),
    insID = $('#InsID'),
    service = $('#Service'),
    otherService = $('#OtherService'),
    comments = $('#Comments'),
    outOfPocket = $('#OutOfPocket'),
    permission = $('#Permission'),
    signature = $('#Signature');

function formIsValid() {
    if (missingRequiredField([
        firstName, lastName, dateOfBirth, city, phone, email,
        insType, insID, service, comments, outOfPocket, permission,
        signature
    ])) {
        alert('There is a missing required field.');
        return false;
    }

    alert('The form was valid.');

    return false;
}

function missingRequiredField(objs) {
    var hasError = false;
    objs.forEach(function(o) {
        if (!$(o).val()) {
            $(o).addClass('error');
            hasError = true;
        }
    });

    return hasError;
}

フィールドを空白のままにするとalert('There is a missing required field.');. しかし、何らかの理由で、$(o).addClass('error');実際にはクラスを追加していません。クラスを手で追加すると、視覚的なスタイルが私が望むように見えるので、クラスが機能することはわかっています。さらに、alert.

ここで何か不足していますか？これは簡単だと思いました-jQueryのドキュメントで確認しても、私には正しいようです。

マークアップのフィールドの 1 つの例を次に示します。

<div>
    <label for="FirstName">First Name</label>
    <input type="text" id="FirstName" name="FirstName" />
</div>

編集

私forEachは基本的なforループに引き出しても、addClassまだかかりません。フィールドに値がないときにhasError返されるため、関数は機能しています-ちょうど頑固です。注:このバージョンでは、周囲の不要な部分を削除しました。trueaddClass$o

function missingRequiredField(objs) {
    var hasError = false;
    for (var i = 0; i < objs.length; i++) {
        var o = objs[i];
        if (!o.val()) {
            o.addClass('error');
            hasError = true;
        }
    }

    return hasError;
}
4

3 に答える 3

2

jQuery セレクターは、DOM の準備が整う前に実行されます。これは、要素が選択されていないことを意味します (まだビルドされていないため)。

DOM の準備ができた後に要素を選択すると、機能します。

$(document).ready(function() { 
    firstName = $('#FirstName');
    lastName = $('#LastName');
});

さらに、他の人が述べているように、.foreach()ループを通常のループに変換する必要がありforます。

例については、次の jsbin を参照してください。

http://jsbin.com/uzefeg/3/edit

于 2013-05-09T16:08:26.207 に答える
0

次の jsFiddle の例で動作します: http://jsfiddle.net/nHHyQ/

確かに、テストには 1 つのフィールドしか使用していません。当たり前のように聞こえるかもしれませんが、エラー クラスのスタイルを設定しましたか? css のスペルとセレクターを再確認してください。

Javascript : var firstName = $('#FirstName'); $(document).ready(function () { $('#test').click(function (e) { formIsValid(); }); });

function formIsValid() {
    if (missingRequiredField([
    firstName])) {
        alert('There is a missing required field.');
        return false;
    }

    alert('The form was valid.');

    return false;
}

function missingRequiredField(objs) {
    var hasError = false;
    objs.forEach(function (o) {
        if (!$(o).val()) {
            $(o).addClass('error');
            hasError = true;
        }
    });

    return hasError;
}
于 2013-05-09T16:16:17.237 に答える
0

//このコードは問題を解決するはずです

$(function(){
var firstName = $('#FirstName'),
    lastName = $('#LastName'),
    dateOfBirth = $('#DateOfBirth'),
    city = $('#City'),
    phone = $('#Phone'),
    email = $('#Email'),
    insType = $('#InsType'),
    otherInsType = $('#OtherInsType'),
    insID = $('#InsID'),
    service = $('#Service'),
    otherService = $('#OtherService'),
    comments = $('#Comments'),
    outOfPocket = $('#OutOfPocket'),
    permission = $('#Permission'),
    signature = $('#Signature');

function formIsValid() {
    if (missingRequiredField([
        firstName, lastName, dateOfBirth, city, phone, email,
        insType, insID, service, comments, outOfPocket, permission,
        signature
    ])) {
        alert('There is a missing required field.');
        return false;
    }

    alert('The form was valid.');

    return false;
}

function missingRequiredField(objs) {
    var hasError = false;
    objs.forEach(function(o) {
        if (!$(o).val()) {
            $(o).addClass('error');
            hasError = true;
        }
    });

    return hasError;
}

});
于 2013-05-09T16:37:28.970 に答える