2

BasistancejQueryフォーム検証プラグインを使用しています。

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

http://jquery.bassistance.de/validate/demo/

フォームフィールドを使用してフォームを作成し、ルールを設定しました。

JavaScript

$(document).ready(function() {
    $.validator.setDefaults({
        submitHandler: function() {
          alert("submitted!");
        }
    });
    var validator = $("#testform").validate({
        rules: {
            field1: "required",
        },
        messages: {
            field1: "",
        },
        error: function(element) {
            element.addClass("error");
        },
        success: function(label) {
            label.addClass("checked");
        }
    });
});

CSS

#testform input{
  border: solid 2px black;
}
#testform input.error{
  border: solid 2px #CC0000;
}
#testform input.checked{
  border: solid 2px #094AB2;
}

HTML

<form id="testform" name="testform">
<input id="field1" name="field1" type="text" value="">
<input id="field2" name="field2" type="text" value="">
<input type="submit" value="submit"/>
</form>

エラー関数は正常に機能しています。ただし、成功関数はinput type = textにスタイルを追加するのではなく、デフォルトのスタイルが表示されます（青ではなく黒の境界線）。どうすればこれを解決できますか？

これが作業中のフィドルです

4

2 に答える 2

6

に変更#testform input.checkedします#testform input.valid。フォームを送信し、開発者ツールまたはFirebugでクラスを確認することでこれを取得しました。クラス名が有効に変更され、チェックされていないのを見ました

これがライブデモです

于 2013-03-06T19:36:49.703 に答える
1

メソッドのsuccessコールバックはvalidate、指定されたフォーム入力のラベルを渡します。ラベルが存在しない場合は、ラベルを作成します。

コードが意図したとおりに機能しない理由は、CSSが、checkedクラスが実際にラベルに追加される入力に追加されると想定しているためです。

validvalidateメソッドは、検証に合格した入力と合格しなかった入力にクラスを自動的に追加しerrorます。追加のタスクを実行する予定がない限り、特定のコールバックを削除できる可能性があります。

CSS

#testform input.valid{
  border: solid 2px #094AB2;
}

JS

var validator = $("#testform").validate({
    rules: {
        field1: "required",
    },
    messages: {
        field1: "",
    }
});

デモ

于 2013-03-06T19:37:10.827 に答える