5

私はjqueryとvalidateを使用してフォームを検証しています。欠落しているフィールドに要素を追加する代わりに、このオプションを使用して要素に境界線を追加していますerrorPlacement

$("#signup-form").validate({
       submitHandler: function(form) {
      form.submit();
   },
   errorPlacement: function(error, element) {
      element.css("border", "solid 1px red");
   }                    
});

私が理解できないように見える1つのことは、有効なときにそれをクリアする方法ですか？

それで、私は上記のコードから始めました。それから試してみましたが、結果に混乱しています。フィールドが失敗したときにオプションがない場合success:は、クラスが正常に追加されます。しかし、オプションを追加するとすぐに、successすべての必須フィールドがそのクラスを取得します。要素を検査すると、<input class="required invalid valid">何かが間違っていることがわかります。

           $("#signup-form").validate({
                submitHandler: function(form) {
                    // do other stuff for a valid form
                    //form.submit();
                },
                errorPlacement: function(error, element) {
                    element.addClass("invalid");
                },        
                success: function(error) {
                    // change CSS on your element(s) back to normal
                },                    
                 debug:true
            });
4

2 に答える 2

7

これを.validate()オプションのリストに追加してみてください...

success: function(error) {
    // change CSS on your element(s) back to normal
}

これは、フォームの送信なしで動的に機能するはずです。エラーが解決されるとすぐに、含まれているコードが実行されます。

ドキュメントを参照してください。

jsFiddle を使用して問題のデモを作成してください。これは、すでに含まれていてすぐに使用できる空の jsFiddleです。.validate()

編集

OPの jsFiddle に従って、これらの変更を加えました...

    errorPlacement: function(error, element) {
        $(element).filter(':not(.valid)').addClass("invalid");
    },
    success: function(error) {
        console.log(error);
        $("#signup-form").find('.valid').removeClass("invalid");
    }

実際のデモ: http://jsfiddle.net/u3Td3/6/

補足: HTML の問題もありました。inputで要素を「自己終了」する必要があります/>。送信ボタンについても同じことが言え</input>ます。HTML を検証するには、validator.w3.orgを参照してください。tableまた、レイアウトには a を使用せず、CSS を使用します。

于 2012-08-28T15:47:26.530 に答える