0

私はこのプラグインを文字通り何百回も使用してきましたが、このような問題は一度もありませんでした..現在、フォームが送信されると(フィールドが空の状態で)、エラーラベルが正しく表示されます..まだ、フィールドに入力するか、 2つ正しく、これらのフィールドのエラーは消えません..フォームを再送信すると、フィールドが空のままで検証されていなくても送信されます..

私は jQuery v1.8.2 と jQuery Validate v1.11.0 を実行しています。サイトは Twitter ブートストラップで実行されているため、プラグイン コードの最後にハイライト、成功、およびエラー配置関数があります。

開発者へのリンクを提供できます。私にメッセージを送って修正の可能性があるが、ライブコードをチェックしたい場合 (このアプリはまだ起動されておらず、いくつかのものをクリーンアップするために雇われたばかりです..したがって、このような問題に対処します:[ )

どんな入力でも大歓迎です、ありがとう!

JS は次のとおりです。

$.validator.setDefaults({
submitHandler: function() {
    form.submit();
}
});

$('#register').validate({ 
rules: {
    name: {
        minlength: 2,
        required: true
    },
    lname: {
        minlength: 2,
        required: true
    },
    username: {
        minlength: 2,
        required: true,
        remote: {
            url: '/setup/verify_username/',
            cache: false
        }
    },
    email: {
        required: true,
        email: true,
        remote: {
            url: '/setup/verify_email/',
            cache: false
        }
    },
    password: {
        required: true,
        alphaNumeric: true,
        minlength: 5,
        maxlength: 250
    },
    password2: {
        required: true,
        alphaNumeric: true,
        minlength: 5,
        maxlength: 250,
        equalTo: '#password'
    },
    postal_code: {
        required: true,
        minlength: 5
    },
    timezones: {
        required: true
    },
    mp: {
        minlength: 10,
        required: true
    },
    gender: {
        required: true
    },
    dob: {
        required: true,
        date: true
    }
},
messages: {
    name: "Please enter your first name",
    lname: "Please enter your last name",
    username: {
        required: "Please enter a username",
        minlength: "Your username must consist of at least 2 characters"
    }, 
    email: "Please enter a valid email address",
    password: {
        required: "Please provide a password",
        minlength: "Your password must be at least 5 characters long"
    },
    password2: {
        required: "Please provide a password",
        minlength: "Your password must be at least 5 characters long",
        equalTo: "Please enter the same passwords"
    },
    postal_code: "Please enter a valid email address",
    timezones: "Please select a time zone",
    mp: "Please enter a valid mobile number. Only numbers please.",
    gender: "Please select a gender",
    dob: "Please enter a valid Date of Birth in mm/dd/yyyy format."
},
highlight: function(element) {
    $(element).closest('.control-group').removeClass('success').addClass('error');
},
success: function(element) {
    $(element).closest('.control-group').removeClass('error').addClass('success');
    $(element).closest('form').find('.valid').removeClass("invalid");
},
errorPlacement: function(error, element){
    error.text( element.closest('.control-group').find('.help-line') );
},
onfocusout: function(element) { 
    $(element).valid();  
}
});

ライブ環境とはすべての要因が異なるため、単純にjsfiddleの例を作成することに消極的でしたが、@Sparkyの推奨により、ここにあります（Sparkyに感謝します） http://jsfiddle.net/DLcLJ/7/

フィールドをタブで移動すると、フィールドが無効であることが正しく通知されることがわかります..データを入力すると、無効のままになります..フォームを送信すると、入力したばかりのフィールドが有効なデータになりますに、無効のままになります..まあ...

4

1 に答える 1

1

あなたが投稿したコードについての私の所見を指摘します。

多くの冗長性やデフォルト機能の重複など、潜在的な問題がいくつか見られます...

1)form変数をコールバック関数に渡すのを忘れましたsubmitHandler...

submitHandler: function() {
    form.submit();
}

する必要があります...

submitHandler: function(form) {
    form.submit();
}

検証に合格したときにフォームを送信するのもデフォルトの動作であるため、オプションから全体submitHandlerを除外することができ、この場合は違いはありません。プラグインがデフォルトに従って送信を処理するようにするだけです...これはsubmit、フォームが検証された場合にイベントを許可するだけです。他に何もしていない場合は、カスタム ハンドラー関数を記述する必要はありません。

2) デフォルトでは、プラグインは「オン フォーカス アウト」で各フィールドを検証します。では、なぜデフォルトの onfocusout コールバック関数を でオーバーライドしているの$(element).valid();ですか? あなたのタイトルによると、それは「onblurの起動に失敗しました」です。したがって、以下を削除して、プラグインにデフォルトどおりにこれを実行させます...

onfocusout: function(element) { // <-- remove
    $(element).valid();         // <-- remove
}                               // <-- remove

3) あなたのコード...

highlight: function(element) {
    $(element).closest('.control-group').removeClass('success').addClass('error');
},
success: function(element) {
    $(element).closest('.control-group').removeClass('error').addClass('success');
    $(element).closest('form').find('.valid').removeClass("invalid");
},

success「有効な要素を表示するために」発射されます。 unhighlight「オプションによって行われた変更を元に戻すために」起動されますhighlight。

ただし、highlightとunhighlightは補完的な機能なので、代わりにこれが必要になるかもしれません...

highlight: function(element, errorClass, validClass) {
    $(element).closest('.control-group').removeClass('success').addClass('error');
},
unhighlight: function(element, errorClass, validClass) {
    $(element).closest('.control-group').removeClass('error').addClass('success');
},
success: function(label) {
    $(label).closest('form').find('.valid').removeClass("invalid");
},

4) コードに無効なルールが含まれていました。コメントを見る...

password: {
    required: true,
    alphaNumeric: true,  // <-- not valid spelling and plugin missing
    minlength: 5,
    maxlength: 250
},
password2: {
    required: true,      // <-- redundant
    alphaNumeric: true,  // <-- redundant
    minlength: 5,        // <-- redundant
    maxlength: 250,      // <-- redundant
    equalTo: '#password'
},

スペルする必要があり、欠落していたプラグインalphanumericも必要です。additional-methods.js

password: {
    required: true,
    alphanumeric: true,
    minlength: 5,
    maxlength: 250
},
password2: {
    equalTo: '#password'
},

OPのjsFiddleの修正版は次のとおりです： http://jsfiddle.net/RQnWx/

各コールバック関数とオプションの詳細な説明については、このページを参照してください。

于 2013-02-11T19:56:22.063 に答える