Javascript複数のフィールド/フォームのバリデーション

Question

はい、Stackedのフォーム検証には多くの質問がありますが、達成しようとしているものに非常に近いものがありますが、これは一意だと思います。

私はthisを持っています。thisのスクリプトでは、記入されていない名前ですべてのフィールドを返します。上記作品ながら

function validate () 
{ 
valid = true; 

if (document.contactinfo.Name.value == "") 
{ 
    alert ("You need to fill the name field!"); 
    valid = false; 
} 

    if (document.contactinfo.email.value == "") 
{ 
    alert ("You need to fill in your email!"); 
    valid = false; //change variable valid to false 
} 
return valid; 
} 

と複数のアラートボックスを出し、私は手動で警告する必要があります：私は、複数のフィールド検証と同じ結果を達成しようとするコードの下にこれをやっていたとして、これはより良いアプローチであると感じどのフィールドに何回記入する必要があるかを数回確認します。私はむしろ、1つに欠けているフィールドが急上昇して、それらのフィールドに焦点を戻していることを知らせるアラートを送ることが大切です。 JSのフィドルスクリプトはそれを行いますが、私はエラーが続いています：ValidateRequiredFields is not defined と私はどこに問題があるのか​​分かりません。私はすべてを正しく指定して、フォームデータが渡されているはずです。

どのような考えですか？いつものように、は、必要に応じて説明を求めます。ありがとう！

注：必要なクラスを設定できる非常に簡単なプラグインがあることがわかっているので、JQueryを使用したくありません。

あなたがで文字列にすべてのメッセージを収集することを改善し、1つのアラート

function validate () { 
    var valid = true; 
    var msg="Incomplete form:\n"; 
    if (document.contactinfo.Name.value == "") { 
    msg+="You need to fill the name field!\n"; 
    valid = false; 
    } 
    if (document.contactinfo.contact_email.value == "") { 
    msg+="You need to fill in your email!\n"; 
    valid = false; 
    } 
    if (!valid) alert(msg); 
    return valid; 
} 

改善を行うことができます：私はフィドルエラーについて知らないが、あなたのスクリプトについてseverall改善がある

Answer 1

エラーの最初のフィールドにフォーカスを戻し、問題のあるフィールドの境界線の色を変更する：

今、上記のコードeシグナルエラー、最初のエラーにフォーカスを戻し、エラーのあるフィールドに赤い枠線を置く...まだ改善が必要です。 最初に、フィールドが有効になったら赤い枠線を削除する必要があります。これは上記の各フィールドチェックのelseで行うことができます...しかし、私は各フィールドに1つのエラー条件しかないと仮定しています事件である。 例：電子メールフィールドは空でないか、有効な電子メールであるかを確認できます

これを行うには1つの方法は、開始時にすべての赤い枠線を削除して検証を開始することです。

style.border = "..."はそれを行う単純な方法ですが、私はクラスの変更を望み、エラーがなければクラスを削除します。

上に砂糖は次のようになります。

が-weは、フィールドが有効になると赤い枠線を削除する必要が

-make名、条件、およびメッセージ

自動化を含むすべてのフィールドの配列アレイを循環させることによるプロセス。そうすれば、境界線をクリーニングするサイクルと条件をチェックするサイクルを実行し、コンパクトで再利用可能なコードで終わることができます。