0

ifステートメントにテキスト行を追加すると、検証せずにフォームが送信される理由を理解しようとして、私は髪を引き裂いてきました。

問題を引き起こしているコードの一部は次のとおりです。

var firstName = document.getElementById("firstName");
// if first name is empty
if (firstName.value == "") {
    var fnError = document.getElementById("fnError");
    fnError.innerHTML = "*Please enter your first name";
    fnResult = false;
} else { 
    // Store firstName using local storage
    localStorage.setItem("firstName", firstName.value);
}

次のコード行をelseステートメントに入力しようとしています。

fnError.innerHTML = "";

onsubmitフォームは、イベント ハンドラーを使用して検証されます。

var btnSubmit = document.getElementById("formUser");
btnSubmit.onsubmit = validate;

また、検証関数は、検証の条件が満たされているかどうかに応じて、trueまたはのいずれかを返します。falseそのコード行を追加しようとすると、条件が満たされているかどうかに関係なく、次にユーザーが送信ボタンを押したときにフォームが送信されるまで、これはすべてうまく機能します。

私は JavaScript を初めて使用するので、明らかな何かが欠けている可能性があります。

どうもありがとう！

4

1 に答える 1

0

考えられる問題の 1 つを次に示します。以下に示すように問題のある行をコードに挿入すると、値を返す前に関数が失敗します。「else」ブロックでは、fnError はスコープ内にありますが、その値は未定義です。未定義の値にプロパティを設定しようとすると、エラーが発生します。

} else { 
    // Store firstName using local storage
    fnError.innerHTML = "";
    localStorage.setItem("firstName", firstName.value);
}

これを修正するには、次の行を「if」ブロックの前に移動します。

var fnError = document.getElementById("fnError");

これで、fnError 変数には、"if" ブロックと "else" ブロックの両方で、エラー メッセージ要素への有効な参照が含まれます。

于 2013-10-13T01:42:13.587 に答える