1

我一直在尝试验证使用 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!");
    }
});
4

0 回答 0