首页 > 解决方案 > Ruby Rails 5.2 验证错误未显示为部分表单

问题描述

我有一个在鸡尾酒应用程序上使用的部分表格。验证警告运行良好。您错过了一个必填字段,它会告诉您存在问题以及哪个字段。然后我决定使用 ajax 来增强应用程序。我使用带有 javascript 的部分表单来编辑 edit.js.erb 中的现有项目。我还将 html 中的表单用于 new.html.erb。

但是现在,如果我遗漏了必填字段,应用程序将正确地不采用新对象。但它也不会向用户显示解释原因的错误消息。我不知道我是怎么搞砸的。

这是部分形式:

  <% if cocktail.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(cocktail.errors.count, "error") %> prohibited this cocktail from being saved:</h2>

      <ul>
        <% cocktail.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

<div class='edit-hide'>
  <div class='form-grid'>
    <%= form_with model: cocktail, remote: request.xhr?  do |form| %>


      <div class="field">
        <%= form.label :name %>
        <%= form.text_field :name %>
      </div>

      <div class="field top-space-10">
        <%= form.label :cocktail_photo %>
        <%= form.file_field :cocktail_photo %>
      </div>

      <div class='top-space-15'>
        <h3>Measures & Ingredients</h3>
      </div>

      <div class="form-grid-containers">

      <% 15.times do  |i| %>


          <%= form.text_field :"#{"measure"}#{i+1}", :class => "field form-blank", :size => '5' %>

          <%= form.text_field :"#{"ingredient"}#{i+1}", :class => "field form-blank", :size => '5' %>


      <% end %>

      </div>

      <div class="field">
        <%= form.label :glass %>
        <%= form.text_field :glass %>
      </div>

      <div class="field">
        <div class='top-space-15'>
          <h3><%= form.label :instructions %></h3>
        </div>
        <%= form.text_area :instructions %>
      </div>

      <div class="actions">
        <%= form.submit :class=>'button block-button' %>
      </div>

      
    <% end %>
  </div>
</div>

这是控制器:

  def new
    @cocktail = Cocktail.new
    respond_to do |format|
      format.js
      format.html
    end
    render :new 
  end

  # GET /cocktails/1/edit
  def edit
    respond_to do |format|
      format.js
      format.html
    end
    render :edit
  end

  # POST /cocktails or /cocktails.json
  def create
    @cocktail = current_user.cocktails.build(cocktail_params)
    if !@cocktail.api_image_url.nil?
      Cocktail.capture_api_image(@cocktail)
    else
      @cocktail.cocktail_photo.attach(params[:cocktail][:cocktail_photo])
    end
    respond_to do |format|
      if @cocktail.save
        format.js { redirect_to @cocktail, alert: "Cocktail was successfully created." }
        format.html { redirect_to @cocktail, alert: "Cocktail was successfully created." }
      else
        format.js { render :new }
        format.html { render :new }
      end
    end
  end

  # PATCH/PUT /cocktails/1 or /cocktails/1.json
  def update
    respond_to do |format|
      if @cocktail.update!(cocktail_params)
        if params[:cocktail][:cocktail_photo].present?
          @cocktail.cocktail_photo.purge
          @cocktail.cocktail_photo.attach(params[:cocktail][:cocktail_photo])
        end
        format.js { redirect_to @cocktail, notice: "Cocktail was successfully updated." }
        format.html { redirect_to @cocktail, notice: "Cocktail was successfully updated." }
        format.json { render :show, status: :ok, location: @cocktail }
      else
        format.js { render :edit, status: :unprocessable_entity }
        format.html { render :edit, status: :unprocessable_entity }
        format.json { render json: @cocktail.errors, status: :unprocessable_entity }
      end
    end
  end

这是edit.js.erb文件(我在这里和new.html.erb中都使用了表格,没有新的js)

  $('.edit').off().on('ajax:success', function() {
    clickToExpandCards($(this).closest('.card'));
  });

  function clickToExpandCards($obj){
    if ($obj.hasClass('edit-expand')) { 
      $obj.removeClass('edit-expand');
      $obj.find('.card-ingredients').show();
      $obj.find('.edit-hide').remove();
    } else {
      $obj.addClass('edit-expand');
      $obj.find('.card-ingredients').hide();
      $obj.find('.form-here').append('<%= j render :partial => 'form', locals: { cocktail: @cocktail } %>');
    }
  };

谢谢

标签: ruby-on-railsrubyajax

解决方案


推荐阅读