javascript - 使用 FormData 提交表单并呈现带有验证错误的表单

Question

我在 Rails 应用程序中有一个表单，用于创建新的 Car 记录。因为我希望用户能够选择并上传图像文件，然后通过表单提交它们，所以我将使用 HTML5 FormData 对象在表单提交上提交数据，使用 Coffeescript 如下所示:

filesArray = new Array()

$(document).on 'change', '.file-fields .file-field', () ->

    if @files and @files[0]

        file = @files[0]
        imageType = /image.*/

        if file.type.match(imageType)

            filesArray.push(file)

    return

$(document).on 'submit', '#car-form', (e) ->

    e.preventDefault()

    formData = new FormData(document.getElementById("car-form"))
    i = 0

    while i < filesArray.length
        file = filesArray[i]
        formData.append "photos[]", file, file.name
        i++

    $.ajax '/cars',
        type: "POST"
        data: formData
        processData: false
        contentType: false

    return

但我希望表单的行为仍然像同步提交一样，以便 Rails 执行验证并在验证失败时呈现带有错误消息的表单。目前，我的 CarsController 有一个 create 操作，如下所示:

def create

    @car = current_user.cars.build(car_params)

    respond_to do |format|
      if @car.save

        format.html { redirect_to @car, notice: 'Car was successfully created.' }
        format.json { render :show, status: :created, location: @car }
      else
        format.html { render :new }
        format.json { render json: @car.errors, status: :unprocessable_entity }
      end
    end
  end

我使用 FormData 提交图像，而不是直接通过表单发送，以便我可以处理图像预览。

当我提交表单时，参数将传递给 CarsController#create 操作，并触发一些 before_action 过滤器。但表单上没有任何反应，不会重新加载，也不会出现验证。

Processing by CarsController#create as */*
  Parameters: {"utf8"=>"✓", ...
  Rendered cars/_form.html.erb (60.8ms)
  Rendered cars/new.html.erb within layouts/application (62.9ms)
Completed 200 OK in 746ms (Views: 640.5ms | ActiveRecord: 1.8ms)

我应该如何设置表单、 Controller 和 Javascript，以便我的表单的行为就像同步提交一样，但数据不正确时会出现验证错误？

Answer 1

表格示例:

   <form class="file-fields" enctype="multipart/form-data" method="post">
        <input class="file-field" type="file" multiple />
        <button type="submit">Upload</button>
   </form>

CoffeeScript :

$(document).on 'submit', '#car-form', (e) ->

    fileInput = $('.file-fields .file-field')[0]
    for i = 0 i < fileInput.length i++
        file = @files[i]
        imageType = /image.*/

        if !file.type.match(imageType)
            return false

    return true

这会检查输入是否有图像。如果不正确则提交失败。否则提交并让 Rails 接管。