0

クライアント側で送信前にフィールドを検証するために Zend_Form バリデーターを使用する jQuery 検証「プラグイン」(まだプラグインではない) に取り組んでいるので、制約を 2 回ではなく 1 回指定するだけで済みます(Zend Validators + jQueryたとえば、プラグインを検証します)。

各フィールドの検証 AJAX 要求を保存し、それらが完了するのを待ってから、結果を読み取り、エラー メッセージを表示するかどうかを指定します。

問題: 検証済みの文字列を入力して送信を押すと、エラーは表示されません (これまでのところ問題ありません) が、フォームの送信ボタンを再度クリックして実際に送信する必要があります。

関数内でreturn trueorを作成しても無視され、機能しません。そのため、フラグを使用して、本当にフォームを送信できるかどうかを関数に伝えました。false.whenAll

$(function() {

    var form = $('form'); // target form
    var requests = [], validations = []; // used to store async requests and their results
    var nbInputs = $('input[type="text"], input[type="password"]').length; // number of inputs we want to check in the form
    var cancelSubmit = true; // skip validation flag

    form.submit(function( ) {

        // if we call the submit inside the function, skip validation and do submit the form
        if(cancelSubmit === false) {
            console.log('[-] cancelSubmit is false. Validation skipped.');
            this.submit();
            return true;
        }

        console.log('[-] Entering validation');

        // resetting requests and validations
        requests.length = 0;
        validations.length = 0;

        // for each input (text/password), storing the validation request
        $('input[type="text"], input[type="password"]').each(function(i) {

            var validatorField = $(this).attr('data-validator');
            var valueField = $(this).val();

            postData = {
                validator: validatorField,
                value: valueField
            };

            // storing requests into an array
            requests.push($.post('/validate', postData));
        });

        (function($) {
            $.whenAll = function() {
                return $.when.apply($, arguments);
            };
        })(jQuery);

        // when all the requests are done and returned a response
        $.whenAll(requests).then(function() {

            // show the validation status for each input
            $.each(requests, function(i, element) {
                element.done(function(data) {

                    // response is formatted like this
                    // { valid: 1 } or { valid: 0, message:"This is the error message" }
                    json = $.parseJSON(data);
                    formGroup = $('input:eq('+i+')').parent();

                    // if it isn't valid, show error and store result
                    if(json.valid == 0) {
                        if($('span.help-block', formGroup).length == 0) {
                            $(formGroup).addClass('has-error').append('<span class="help-block">'+json.message+'</span>');
                            $('label', formGroup).addClass('control-label');
                        }

                        validations.push(0);
                    }
                    // else, remove error (if there was) and store the result
                    else if(json.valid == 1) {

                        if($(formGroup).hasClass('has-error'))
                        {
                            $(formGroup).removeClass('has-error');
                            $('.help-block', formGroup).remove();
                        }

                        validations.push(1);
                    }

                    // if we got all the validations required
                    if(validations.length == nbInputs)
                    {
                        console.log('[-] All validations have been done.');

                        // and if no error ("0") in the results, we resubmit the form with skip-flag
                        if($.inArray(0, validations) == -1){
                            console.log('[-] No errors. Submitting form.');
                            cancelSubmit = false;
                            form.off('submit');
                            form.submit();
                        }
                        else
                            console.log('[-] There is still errors.');
                    }
                });
            });
        });

        // there are errors, so we won't submit the form
        if(cancelSubmit === true)
            return false;
    });
});

私のコードに論理的な欠陥がありますか? フラグを付けてフォームを再送信するのは、正しい方法ではないのでしょうか?

4

1 に答える 1

0

フォーム送信ハンドラーからではなく、サブスコープから戻っています。代わりに、常に送信を禁止し、送信しform[0].submit()たいときに送信するように強制します。

form.submit(function(e) {
    e.preventDefault();
    ...

    // now i want to submit...
    form[0].submit();

form[0].submit()jquery バインドされた送信ハンドラーをバイパスします。

于 2013-10-24T15:58:49.643 に答える