Dropzone.js 和表单验证

Question

是否可以不破坏在将整个表单标记为“dropzone”类后显示的漂亮 Rails 表单验证错误？

现在，当我尝试提交表单时，没有任何变化，页面保持不变，没有为用户提供任何信息，哪些字段不符合要求。控制器呈现似乎没有被视图处理的 JSON 响应（使用结果的 dropzone）。

提前感谢您的快速回复。

Answer 1

我对这个问题的解决方法：

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]);
                }
            }
        });
    }
};

Answer 2

您需要自己将 JSON 响应解析为您的 js 回调，如下所示：

   Dropzone.options.filedrop = {
      init: function () {
        this.on("complete", function (file, jsonResponse) {
          console.log(jsonResponse);
          //do stuff with the jsonResponse here
        });
      }
    };