3

はい、Stacked についてフォームの検証に関する質問がたくさんあることは承知していますが、私が達成しようとしていることに非常に近いものもありますが、これはユニークだと思います。

使用したいこのスクリプトでこのJS フィドルを使用すると、入力されていないすべてのフィールドが名前で返されます。複数のフィールド検証で同じ結果を達成しようとするためにコードの下でこれを行っていたので、これははるかに優れたアプローチだと思います。

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;
}

上記は機能し、複数の警告ボックスを表示しますが、どのフィールドに入力する必要があるかを手動で何度も警告する必要があります。むしろ、どのフィールドが欠落しているかを一挙に知らせるアラートを送信し、それらのフィールドにフォーカスを戻す方がはるかに望ましいでしょう。JS fiddle スクリプトはそれを行いますが、次のエラーが発生し続けValidateRequiredFields is not defined ます。問題がどこにあるのかわかりません。私はすべてに正しい名前を付けました。フォームデータは通過するはずです。

何かご意見は？いつものように、必要に応じて説明を求めてください。ありがとう！

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

4

1 に答える 1

5

フィドルエラーについてはわかりませんが、スクリプトについてはいくつかの改善があります。

すべてのメッセージを文字列に収集し、単一のアラートを実行することで、これを改善できます

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;
}

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

function validate ( ) {
  var valid = true;
  var msg="Incomplete form:\n";
  if ( document.contactinfo.Name.value == "" ) {
    if (valid)//only receive focus if its the first error
      document.contactinfo.Name.focus();
    //change border to red on error (i would use a class change here...
    document.contactinfo.Name.style.border="solid 1px red";
    msg+="You need to fill the name field!\n";
    valid = false;
  }
  if ( document.contactinfo.contact_email.value == "" ) {
    if (valid)
      document.contactinfo.contact_email.focus();
    document.contactinfo.contact_email.style.border="solid 1px red";
    msg+="You need to fill in your email!\n";
    valid = false;
  }
  if (!valid) alert(msg);
  return valid;
}

さて、上記のコードはエラーを通知し、フォーカスを最初のエラーに戻し、エラーのあるフィールドに赤い境界線を置きます...それでも改善が必要です。最初に、フィールドが有効になったら、赤い境界線を削除する必要があります..これは、上記の各フィールドチェックでelseを使用して実行できます...ただし、各フィールドにはエラー条件が1つしかないと想定していますが、ケース。例: 電子メール フィールドは、空でないことと有効な電子メールを確認できます。

そのクリーンな方法の 1 つは、最初に赤い境界線をすべて削除してから、検証を開始することです。

style.border="..." はそれを行う単純な方法にすぎません。エラーがない場合は、クラスの変更とクラスの削除をお勧めします。

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

-フィールドが有効になったら、赤い境界線を削除する必要があります

-名前、条件、メッセージを含むすべてのフィールドの配列を作成します

アレイを循環させてプロセスを自動化します。そうすれば、境界をきれいにするためのサイクルと、条件をチェックするための別のサイクルを実行して、コンパクトで再利用可能なコードで終了することができます。

于 2012-04-23T23:50:29.773 に答える