0

jQueryバリデータープラグインを使用してクライアント側の検証を実行している入力フォームがあります。特定のシナリオを除いて、基本的な使用法はうまく機能しています。

フォームは住所入力フィールドを分割し、番地、名前、市区町村、州、および郵便番号の個別のフィールドを許可します。住所自体はフォームへのオプションの入力ですが (ユーザーは住所を入力しないこともできます)、これらのフィールドのいずれかが使用されている場合は、ユーザーがすべてのフィールドに入力するように求められるようにしたいと考えています。

これは機能しますが、誰かがアドレスを入力して [送信] をクリックし、アドレスを入力しないことにした場合を除きます。この場合の理想的な動作は、入力した入力のテキストが削除されるとすぐに、アドレス グループの強調表示が解除されることです。

現在のシナリオは次のとおりです。

  1. ユーザーは、通りの名前など、1 つの入力フィールドにのみ情報を入力します。
  2. 送信ボタンがクリックされます。
  3. バリデータ プラグインは、他のアドレス入力を強調表示し、完全なアドレスを要求するエラー メッセージを表示します。
  4. ユーザーが住所を入力しないことを決定し、前の入力を削除します。たとえば、通りの名前を消去します。
  5. 理想的には:強調表示された他のすべてのアドレス入力の強調表示が解除され、エラー メッセージが削除されます。実際:強調表示されたアドレス入力とメッセージは、フォームの送信まで残ります。

問題を示す JavaScript と、対応するJSFiddleを次に示します。

$("form").validate({
    errorClass: 'error',
    errorElement: 'label',
    submitHandler: function() {
        alert("Form submitted");
        return false;
    },
    groups: {
        address: "streetNumber streetName city state zipcode"
    },
    rules: {
        streetNumber: {
            required: {
                depends: function(){
                    return $("#streetName").val() != '' || $("#city").val() != '' || $("#state").val() != '' || $("#zipcode").val() != '';
                }
            }
        },
        streetName: {
            required: {
                depends: function(){
                    return $("#streetNumber").val() != '' || $("#city").val() != '' || $("#state").val() != '' || $("#zipcode").val() != '';
                }
            }
        },
        city: {
            required: {
                depends: function(){
                    return $("#streetNumber").val() != '' || $("#streetName").val() != '' || $("#state").val() != '' || $("#zipcode").val() != '';
                }
            }
        },
        state: {
            required: {
                depends: function(){
                    return $("#streetNumber").val() != '' || $("#streetName").val() != '' || $("#city").val() != '' || $("#zipcode").val() != '';
                }
            }
        },
        zipcode: {
            required: {
                depends: function(){
                    return $("#streetNumber").val() != '' || $("#streetName").val() != '' || $("#city").val() != '' || $("#state").val() != '';
                }
            }
        }
    },
    messages: {
        streetNumber: {required: "Must provide full address"},
        streetName: {required: "Must provide full address"},
        city: {required: "Must provide full address"},
        state: {required: "Must provide full address"},
        zipcode: {required: "Must provide full address"}
    },
    highlight: function(element, errorClass, validClass) {
        $(element).addClass(errorClass).removeClass(validClass);
    },
    unhighlight: function(element, errorClass, validClass) {
        $(element).removeClass(errorClass);
    },
    errorPlacement: function(error, element) {
        var n = element.attr("name");
        if (n == "streetNumber" || n == "streetName" || n == "city" || n == "state" || n == "zipCode")
                error.insertAfter("#zipcode");
    }
});

ハイライトの目的の機能を取得しようとすることに加えて、条件ステートメントの混乱を伴わない「オールオアナッシング」入力グループを達成するためのよりスマートな方法があるかどうかも疑問に思っています. おそらく、フォーム入力グループを使用できますか?

4

3 に答える 3

0

ハイライト解除にメソッドを追加してみることができます:

$('.error').removeClass(errorClass);

または関連する入力を定義して行う

$('.relatedInputs').removeClass(errorClass);

次のような onChange 関数を追加することもできます

function(el){
   if(el.val() == ''){
    $('.relatedInputs').removeClass(errorClass);
   } 
}
于 2013-08-16T14:33:00.360 に答える