0

jquery にはかなり慣れていませんが、コードが凝縮されている可能性があることに気付きました。それは問題なく動作しますが、冗長なコードのように見えるため、これを行うためのより良い方法が必要です。検証中の 2 つの入力フィールドとテキストエリアがあります。以下を参照してください。私はまだ学んでいるので、コードサンプルは理想的ですが、どんな助けも感謝しています:

$("form#designForm").submit(function(){

    if($("#ccDesignFirstName").val().length == 0){
      alert("Full Name field is required");
      $("#ccDesignFirstName").focus();
      return false;
    }        

    if($(".telephoneInput").is(":visible")){
        if($("#ccDesignTelephone").val().length == 0){
          alert("Phone is required");
          $("#ccDesignTelephone").focus();
          return false;
        }
    }

    if($("#ccDesignProblem").val().length == 0){
      alert("Question is required");
      $("#ccDesignProblem").focus();
      return false;
    }
});
4

2 に答える 2

1

フォーム内のすべての入力を反復処理するには、次のようにします。

$("form#designForm").submit(function(){
    var valid = true;
    $("form#designForm :input").each(function(){
        //$(this) is the jquery object of the input.
        //do your validation here
        if($(this).val().length == 0){
            valid = false;
        }
        //some more validation if needed...
    });
    return valid;
});

これは、jquery [:input selector][1] を使用して、すべてのタイプの入力を取得します。テキストだけが必要な場合は、次のことができます。

$("form#designForm input[type=text]")

等

于 2013-05-09T22:47:50.507 に答える
0

ええ、フォーム検証にはいくつかの異なる戦略があります。私の個人的なお気に入りは、検証したい要素にクラスを追加することです。

すべてのフィールドを空白のままにする必要はありませんか? check-emptyクラスを入力に追加します。電子メールの検証を確認する必要がありますか? クラスを追加しemailます。JavaScript では、単一の jQuery セレクターを使用して、各入力をカテゴリ別に調べ、各チェックに合格することを確認できます。

ここでは少しやり過ぎて、各関数に .apply() を使用しました。正直なところ、非同期で何かを行う必要がある場合 (たとえば、電子メールが一意であることを確認するためのサーバーへの AJAX 要求) には、この手法は耐えられません。

AJAX で確認する必要がある場合は、コールバックを使用してすべてを検証する必要があります。一般的に言って、そのようなことは 1 回か 2 回起こるので、あまり凝る必要はありません。AJAX 呼び出しが非常に多いフォームがある場合は、jQuery の$.Deferredの使用を検討してください。

ご不明な点がございましたら、お知らせください。これは、フォームの検証に関する私の個人的な見解にすぎません。それを行う方法は他にもたくさんあります。CSS ルールを使用して検証すると、他の領域のフィールドもチェックできることがわかりました。そして、これはかなり再利用可能です。フォームの検証は、Web では一般的なタスクです。確実な解決策が得られたら、それを特定の状況に適用するだけです。

于 2013-05-10T01:14:33.167 に答える