1

私はJavaスクリプトに取り組んでおり、1つのフェーズで立ち往生しています。私のプロジェクトでは、フォームが送信されたときにすべてのフィールドを検証し、同じページにエラーメッセージをフォームフィールドの上に順番に表示する必要があります。以下は私のコードです

function validation(){
    var errorMsg=new Array(); 
    //var errorMsg = "";
    if(document.getElementById("fullname").value = " "){
        errorMsg[0] = "Please Enter Full Name\n"
}
if(document.getElementById("street").value = " "){
        errorMsg[1]= "Please Enter Street Name\n"
}
if(document.getElementById("postcode").value = " "){
        errorMsg[2]= "Please Enter Postlecode\n"
}
if(document.getElementById("phone").value = " "){
        errorMsg[3]= "Please Enter Phone Number\n"
}
if(document.getElementById("email").value = " "){
        errorMsg[4]= "Please Enter Email Id\n"
}
if(errorMsg!=" "){
    var r =" ";
    for(var i=0;i<=errorMsg.length-1;i++){
    document.getElementById("error").innerHTML="<li>"+errorMsg[i]+"</li>"
    }   
    return false;
}
}
</script>

このコードを実行すると、最後の値のみが得られます

フォームの上部にエラー メッセージを表示する方法を教えてください。

4

7 に答える 7

3

ここで間違いがあります：

document.getElementById("error").innerHTML="<li>"+errorMsg[i]+"</li>"

errorMsg割り当てるのではなく、追加する必要があります。たとえば、次のようにします。

document.getElementById("error").innerHTML+="<li>"+errorMsg[i]+"</li>"

ページの上部にエラー メッセージを表示する場合は、必要な場所に div を作成し、この div に ID を指定して、innerHtml をこの div に設定する必要があります。

<div id="AllErrors"></div>

document.getElementById("AllErrors").innerHTML+="<li>"+errorMsg[i]+"</li>"

また、ユーザーがすべての情報を送信した後ではなく、ユーザーが入力しているときに検証を改善し、フィールドを検証することもできます。

ところで、 tag にエラーを追加します<li>。それで、リストを追加<ol>または<ul>作成する必要があることを知っていますか？

于 2012-12-05T06:47:31.403 に答える
1

既存のものを上書きするのではなく、各エラーを既存のものに追加する必要があります。.innerHTML

document.getElementById("error").innerHTML += "<li>"+errorMsg[i]+"</li>"
// note += instead of = here --------------^

ただし、ループを完全にスキップして、これを行うだけです。

document.getElementById("error").innerHTML = "<li>"+errorMsg.join("</li><li>")+"</li>";

(この.join()メソッドは、すべての配列要素を、指定されたテキストで区切られた文字列に入れます。)

また、特定のインデックスを明示的に設定しているため、一部の条件のみが満たされた場合、配列には未定義の (欠落した) 要素が含まれます。つまり<li>、「未定義」と表示された要素を追加することになります。代わりにこれを行う必要があります。

    errorMsg.push("Please Enter Full Name\n");
    // OR
    errorMsg[errorMsg.length] = "Please Enter Full Name\n";

...どちらも配列の最後に追加されます。次に、エラーが発生したかどうかをテストするには、次のようにします。

if (errorMsg.length > 0)

=また、 if ステートメントの条件は、使用する必要がある場所===(または)を使用しているため、すべて割り当てを行って==おり、各フィールドに単一のスペースが含まれているかどうか" "をテストしています。空文字列: "".

于 2012-12-05T06:47:22.230 に答える
1

私はあなたのコードを少し書き直しました。これが私が変更したものです：

  • 値が等しいことを確認する代わりに、演算子" "を使用しました。!
  • pushインデックスで追加する代わりに、配列で使用しました。これは、配列に空のスポットがないことを意味します。pushインデックスに関係なく、配列の末尾に要素を追加します。
  • forEach配列でループを使用しました。これは、存在する要素の数に関係なく、すべての列挙可能な要素を通過します。

したがって、例：

JS

// This could be done on form submit, I used a button for the fiddle.
document.getElementById("button").onclick = function () {   
    var errorMsg = new Array();

    if(!document.getElementById("fullname").value){
        errorMsg.push("Please Enter Full Name");
    }

    if(!document.getElementById("street").value){
        errorMsg.push("Please Enter Street Name");
    }

    if(!document.getElementById("postcode").value){
        errorMsg.push("Please Enter Postal Code");
    }

    if(!document.getElementById("phone").value){
        errorMsg.push("Please Enter Phone Number");
    }

    if(!document.getElementById("email").value){
        errorMsg.push("Please Enter Email Id");
    }

    var messageHtml = "";

    errorMsg.forEach(function (message) {
        messageHtml += "<li>" + message + "</li>";
    });

    document.getElementById("error").innerHTML = messageHtml;
};

このフィドルを参照してください: http://jsfiddle.net/M48gA/

于 2012-12-05T06:51:33.870 に答える
0

inステートメントの代わりに===またはを使用する必要があります。===if

于 2012-12-05T06:41:10.163 に答える
0

=代入演算子です。ステートメントでは、等しいまたは正確に等しい(型もチェック)ifを使用する必要があります。=====

+=また、ステートメント リストでadd to existing 演算子を使用する必要があります。

if(document.getElementById("fullname").value == " "){
    errorMsg[0] = "Please Enter Full Name\n"
}
if(document.getElementById("street").value == " "){
    errorMsg[1]= "Please Enter Street Name\n"
}
if(document.getElementById("postcode").value == " "){
    errorMsg[2]= "Please Enter Postlecode\n"
}
if(document.getElementById("phone").value == " "){
    errorMsg[3]= "Please Enter Phone Number\n"
}
if(document.getElementById("email").value == " "){
    errorMsg[4]= "Please Enter Email Id\n"
}
for(var i=0;i<=errorMsg.length-1;i++){
    document.getElementById("error").innerHTML += "<li>"+errorMsg[i]+"</li>"
}
于 2012-12-05T06:48:47.107 に答える
0

これは、「エラー」の innerHtml が常に置き換えられるためです。したがって、最後の値のみが表示されます。

以下のリンクを試してください

子孫のイベントリスナーを破壊せずにinnerHTMLに追加することは可能ですか?

于 2012-12-05T06:45:29.120 に答える