在线商城购物车添加商品时的尺码选择验证实现问询

要完成这个需求，我们需要前端即时提示+后端安全验证的组合方案——前端提升用户体验，后端防止恶意绕过前端的提交。下面分步骤详细说明：

一、前端验证：即时提示用户选择尺码 #

首先给表单添加错误提示区域，再用JavaScript监听提交事件，检查尺码是否选中：

1. 修改表单代码，添加错误提示容器 #

在你的ERB表单里加入一个用于显示错误的div，同时给select标签加上required属性（HTML5原生验证兜底）：

<%= form_tag clients_order_items_path, input_html: {id: "orderform"} do %>
  <%= hidden_field_tag :product_id, @product.id %>
  <%= hidden_field_tag :user_id, @token %>
  <%= hidden_field_tag :quantity, 1 %>

  <!-- 显示尺码选择错误的提示 -->
  <div id="size-error" class="text-danger mb-2" style="display: none;">请选择您的尺码</div>

  <%= select_tag :size_id, 
                  options_from_collection_for_select(@product.sizes.where('quantity >=1'), :id, :size_name), 
                  prompt: "Your Size", 
                  class: 'form-control custom-select',
                  required: true %> <!-- HTML5原生必填验证 -->

  <%= submit_tag "Add to cart", class: "btn-main", id: "add_to_cart" %>
<% end %>

2. 添加JavaScript提交监听 #

在页面底部（或者你的JS资产文件中）加入以下代码，阻止未选尺码时的表单提交，并显示自定义错误提示：

// 原生JS版本
document.getElementById('orderform').addEventListener('submit', function(e) {
  const sizeSelect = document.getElementById('size_id');
  const errorElement = document.getElementById('size-error');

  if (!sizeSelect.value) {
    e.preventDefault(); // 阻止表单提交
    errorElement.style.display = 'block'; // 显示错误提示
    sizeSelect.classList.add('is-invalid'); // 给select添加错误样式（适配Bootstrap）
  } else {
    errorElement.style.display = 'none';
    sizeSelect.classList.remove('is-invalid');
  }
});

如果你的项目用jQuery，也可以用下面的代码：

// jQuery版本
$('#orderform').on('submit', function(e) {
  const sizeId = $('#size_id').val();
  if (!sizeId) {
    e.preventDefault();
    $('#size-error').show();
    $('#size_id').addClass('is-invalid');
  } else {
    $('#size-error').hide();
    $('#size_id').removeClass('is-invalid');
  }
});

二、后端验证：防止绕过前端的非法提交 #

前端验证可以被开发者工具绕过，所以必须在控制器里做安全校验，确保用户选择的尺码属于当前商品且有效：

修改OrderItemsController的create方法 #

def create
  # 先获取当前商品，确保尺码属于该商品
  @product = Product.find(params[:product_id])
  quantity = params[:quantity].to_i

  # 查找当前商品下的有效尺码（避免用户传入其他商品的尺码ID）
  @size = @product.sizes.find_by(id: params[:size_id])

  if @size.nil?
    # 未选择尺码或尺码不属于当前商品，返回详情页并提示错误
    flash[:error] = "请选择有效的尺码"
    redirect_to clients_product_path(@product)
  elsif @size.quantity >= quantity
    # 库存足够，添加到购物车
    current_cart.add_item(
      product_id: params[:product_id],
      quantity: quantity,
      size_id: params[:size_id],
    )
    redirect_to clients_cart_path, notice: "商品已成功加入购物车"
  else
    # 库存不足的提示
    flash[:error] = "该尺码库存不足，请选择其他尺码"
    redirect_to clients_product_path(@product)
  end
end

在商品详情页显示flash提示 #

最后，在你的商品详情页视图（比如clients/products/show.html.erb）中添加flash信息的显示区域，让用户能看到后端返回的错误提示：

<!-- 放在页面顶部或表单上方 -->
<% if flash[:error] %>
  <div class="alert alert-danger alert-dismissible fade show" role="alert">
    <%= flash[:error] %>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
<% end %>

<% if flash[:notice] %>
  <div class="alert alert-success alert-dismissible fade show" role="alert">
    <%= flash[:notice] %>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
<% end %>

这样就完成了完整的验证流程：用户未选尺码时，前端会即时提示；就算有人绕过前端提交，后端也会拦截并返回错误提示。

内容的提问来源于stack exchange，提问作者johan