jquery - Jasny v3.1.3 と jQuery Validator v1.13.1 を使用した入力ファイルの検証

Question

Jasny v3.1.3 を使用する入力ファイル フィールドを検証しようとしましたが、検証はフォーム送信ボタンがクリックされたときにのみ行われ、$('#exercicio-form').valid()jQuery Validator v1.13.1 からメソッドを明示的に呼び出します。

私が取り組んでいるフィドルを見てください：http://jsfiddle.net/Luf0ks9b/3/

最初のフィールドに無効な名前を挿入し、ページの別の場所をクリックすると、検証が行われ、エラー メッセージが表示されることに注意してください。ただし、ファイル入力フィールドに無効なファイル形式をアップロードすると、検証がすぐに行われません。ただし、送信ボタンをクリックすると完了します。

私はすでにこの質問を見ました: jQuery Validate Plugin, Bootstrap , Jasny Bootstrap File Input RegEx - Validation Working in Firefox Not in Chrome/IE 間違った形式のファイルをアップロードすると、エラーが表示されます。しかし、この回答では、Jasny v2.3.0 を使用しました。私が使用しているものとは別のバージョン。

提案やコメントはいつでも大歓迎です！

編集

HTML および jQuery コードの追加:

<div class="row clearfix">
    <div class="col-md-2 column"></div>
    <div class="col-md-8 column">
        <div class="panel panel-default">
            <div class="panel-heading">
                 <h3 class="panel-title">Some title..</h3>

            </div>
            <div class="panel-body">
                <form class="form-horizontal" role="form" method="POST" enctype="multipart/form-data" id="exercicio-form">
                    <div class="form-group">
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="nome" name="nome" placeholder="Enter with some name..">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-10">
                            <div class="fileinput fileinput-new input-group" data-provides="fileinput">
                                <div class="form-control" data-trigger="fileinput"> <i class="glyphicon glyphicon-file fileinput-exists"></i>
 <span class="fileinput-filename"></span>

                                </div> <span class="input-group-addon btn btn-default btn-file">
                        <span class="fileinput-new">Search..</span>
 <span class="fileinput-exists">Change</span>

                                <input type="file" name="file" id="file">
                                </span> <a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>

                            </div>
                        </div>
                    </div>
                </form>
                <button value="Submit" class="btn btn-default" id="submitExercicio" data-loading-text="Submitting.." style="float:right">Submit</button>
            </div>
            <div class="col-md-2 column"></div>
        </div>
    </div>

jQuery:

$('#exercicio-form').validate({
    rules: {
        nome: {
            minlength: 5,
            required: true
        },
        file: {
            required: true,
            //accept: "image/jpeg, image/pjpeg"
            accept: "video/mp4"
        }
    },
    highlight: function (element, errorClass, validClass) {
        console.log("highlight");
        $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
    },
    success: function (element) {
        console.log("success");
        $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function (error, element) {
        console.log("errorPlacement");

        // if element is file type, we put the error message in its grand parent
        if (element.prop("type") === "file") {
            error.insertAfter(element.parent().parent());
        } else {
            error.insertAfter(element);
        }
    }
});

$("#submitExercicio").click(function (e) {
    e.preventDefault();

    if ($('#exercicio-form').valid()) {
        $('#submitExercicio').button('loading');
    } else {
        alert("Invalid fields still!");
    }
});