0

従来のクライアント側の検証 (jQuery Validate など) + サーバー側の検証ではなく、Zend_Form バリデーターを使用してフォームを検証できるようにするスクリプトを作成しました。

$(document).ready(function() {

var form = $('form'); // target form
var requests = [], validations = [];
var nbInputs = $('input[type="text"], input[type="password"]').length; // number of inputs (text/password) in the form
var cancelSubmit = true;

form.submit(function() {

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

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

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

    // for each input (text/password), get the validation status from the server
    $('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) {

                json = $.parseJSON(data);
                formGroup = $('input:eq('+i+')').parent();

                // if it isn't valid, show error
                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');
                    }
                    // and store the validation status
                    validations.push(0);
                }
                // else, remove error
                else if(json.valid == 1) {
                    $(formGroup).removeClass('has-error');
                    $('.help-block', formGroup).remove();
                    // and store the validation status
                    validations.push(1);
                }

                // if we got all the validations required
                if(validations.length == nbInputs)
                {
                    console.log('[-] All validations have been done.');
                    if($.inArray(0, validations) == -1){
                        console.log('[-] No errors. Submitting form.');
                        cancelSubmit = false;
                        form.submit();
                    }
                    else
                        console.log('[-] There are still errors.');
                }
            });
        });
    });

    return false;
});
});

検証ページのサーバー側は、JSON :{ valid: 0, message: "error message" }または{ valid: 1}.

フォームを送信できません。有効な値を入力すると、検証はスキップされますが、フォームは送信されません。cancelSubmit機能させるには、もう一度送信ボタンを押す必要があります (ただし、 に設定されているため、今回はチェックされない無効な値を入力できた可能性がありますfalse)。

return true;内で使用される場合、フォームを送信することになっていません.submit()か?

4

0 に答える 0