Dropzone.js和表单验证

问题描述：

是否有可能在标记整个表单的'dropzone'类之后不打破良好的Rails表单验证错误？

Is it possible not to break the nice Rails form validation errors displayed after marking the whole form the 'dropzone' class?

现在，当我尝试提交形式，没有任何变化，页面停留在它没有提供任何信息给用户哪些字段不符合要求。控制器呈现JSON响应（dropzone使用后果），这似乎不被视图处理。

Now, when I try to submit the form, nothing changes and the page stays at it was without providing any info for user which fields doesn't meet the requirements. Controller renders JSON response (dropzone using consequence) which seems to not be processed by the view.

预先感谢您的快速响应。

Thank you in advance for your quick response.

答

这个问题的解决方法：

My workaround for this problem:

Dropzone.options.filedrop = {
    init: function () {
        // Other triggers not listed
        // ...

        this.on("error", function (file, response) {
            // Gets triggered when the files have successfully been sent.
            // Redirect user or notify of success.

            // Build an unordered list from the list of errors
            var _ref, _results, _i, _len;
            if ($.isPlainObject(response)) { // Check if response is in JSON format for showing standard form errors
                // Remove errors from accepted image
                file.previewElement.classList.remove("dz-error");
                _ref = file.previewElement.querySelectorAll("[data-dz-errormessage]");
                _results = [];
                for (_i = 0, _len = _ref.length; _i < _len; _i++) {
                    node = _ref[_i];
                    _results.push(node.textContent = null);
                }

                file['status'] = 'success';
                console.log("acceptedImage: " + JSON.stringify(file));

                var json = response;
                var errorText = "<div id=\"error_explanation\"><h2>" + Object.keys(json).length + " errors prohibited this thing from being saved:</h2><ul>";
                $.each(json, function (key, value) {
                    errorText += "<li>" + key.capitalize() + ' ' + value[0] + "</li> ";
                });
                errorText += "</ul></div>";
                console.log("errorText: " + errorText);

                // Insert error list into form
                $('.errors_placeholder').html(errorText);
            } else {
                if (myDropzone.files.length > 1) {
                    myDropzone.removeFile(myDropzone.files[0]);
                }
            }
        });
    }
};

Dropzone.js和表单验证

相关推荐