order.html

<form accept-charset="UTF-8" action="/orders" class="formtastic order" data-validate="true" id="new_order" method="post" novalidate="novalidate" name="new_order">
  <div>
    <fieldset>
      <legend><span>Select a Store</span></legend>
      <ol>
        <li class="error">
          <label for="order_store">Store</label> <select data-validate="true" id="order_store_id" name="order[store_id]">
            <optgroup label="Independant">
              <option value ="" />
              <option value="2">
                Some store
              </option>
            </optgroup>
          </select>
          <p class="inline-errors">
            Please select what store this order is for
          </p>
        </li>
      </ol>
    </fieldset>
    <input id="order_status" name="order[status]" type="hidden" value="created">
    <fieldset class="inputs">
      <legend><span>Order details</span></legend>
      <ol>
        <li class="string required error" id="order_sales_person_input">
          <label for="order_sales_person">Sales person<abbr title="required">*</abbr></label><input data-validate="true" id="order_sales_person" maxlength="255" name="order[sales_person]" size="30" type="text">
          <p class="inline-errors">
            can't be blank
          </p>
        </li>
        <li class="string optional" id="order_order_reference_input">
          <label for="order_order_reference">Order reference</label><input id="order_order_reference" maxlength="255" name="order[order_reference]" size="30" type="text">
        </li>
      </ol>
    </fieldset>
    <div class="product-left">
      <fieldset class="inputs">
        <legend><span>Product Details</span></legend>
        <ol>
          <li id="frames" class="error">
            <label for="order_order_items_attributes_0_frame_id">Frames</label> <select data-validate="true" id="order_order_items_attributes_0_frame_id" name="order[order_items_attributes][0][frame_id]">
              </select>
            <p class="inline-errors">
              can't be blank
            </p>
          </li>
          <li id="colors" class="error">
            <label for="order_order_items_attributes_0_color_id">Frame Color</label> <select data-validate="true" id="order_order_items_attributes_0_color_id" name="order[order_items_attributes][0][color_id]">
              </select>
            <p class="inline-errors">
              can't be blank
            </p>
          </li>
          <li id="lenses" class="error">
            <label for="order_order_items_attributes_0_lens_tint_id">Lens Tint</label> <select data-validate="true" id="order_order_items_attributes_0_lens_tint_id" name="order[order_items_attributes][0][lens_tint_id]">
              </select>
            <p class="inline-errors">
              can't be blank
            </p>
          </li>
        </ol>
      </fieldset>
    </div>
  </div>
  <div id="buttons">
    <fieldset class="buttons">
      <ol>
        <li class="commit">
          <input class="create" id="order_submit" name="commit" type="submit" value="Create Order">
        </li>
      </ol>
    </fieldset>
  </div>
</form>     

order.rb

class Order < ActiveRecord::Base
  has_statuses :created, :in_progress, :approved, :rejected, :shipped, :delivered

  has_many :order_items, dependent: :destroy
  validates_presence_of :order_items, on: :save
  accepts_nested_attributes_for :order_items, reject_if: :all_blank, allow_destroy: true

  attr_accessible :store_id,
    :user_id,
    :order_reference,
    :sales_person,
    :order_items_attributes   

  validates_presence_of :store_id, on: :create, message: "Please select what store this order is for"
  validates_presence_of :sales_person
end                      

order_item.rb

class OrderItem < ActiveRecord::Base       
  belongs_to :order 
    
  belongs_to :color         
  validates :color_id, presence: true    
  
  belongs_to :lens_tint     
  validates :lens_tint_id, presence: true 

  belongs_to :frame  
  validates :frame_id, presence: true  
end    

product.haml

=f.inputs name: "Product Details" do
  %li   
    =f.input :rx, as: :radio, collection: { 'RX' => true, 'Regular Plano' => false }, label: 'Type', hint: "Chose if this is RX frames or regular frames", input_html: { class: 'rx_type' }
  %li#frames
    =f.label :frame_id, 'Frames'       
    =f.grouped_collection_select(:frame_id, @collections.nil? ? [] : @collections, :frames, :name, :id, :name, {prompt: ""})
  %li#colors
    =f.label :color_id, "Frame Color"    
    =f.collection_select(:color_id, @colors.nil? ? [] : @colors, :id, :title, { prompt: "" } )
  %li#lenses
    =f.label :lens_tint_id, "Lens Tint"
    =f.collection_select(:lens_tint_id, @lens_tints.nil? ? [] : @lens_tints, :id, :name, { prompt: "" } )  
  =f.input :lens_type, collection: ['Single Vision', 'Progressive Vision']    

product.html

<fieldset>
  <legend class="label">
    <label>Type</label>
  </legend>
  <ol>
    <li id="frames">
      <label for="order_order_items_attributes_0_frame_id">Frame</label>
      <select data-validate="true" id="order_order_items_attributes_0_frame_id" name="order[order_items_attributes][0][frame_id]">
        <option value=""/>
        <optgroup label="Attach&#xE9;">
          <option value="65">Anime</option>
        </optgroup>
      </select>
    </li>
    <li id="colors">
      <label for="order_order_items_attributes_0_color">Frame Color</label>
      <select data-validate="true" id="order_order_items_attributes_0_color_id" name="order[order_items_attributes][0][color_id]">
        <option value=""/>
        <option value="21">Bronze</option>
      </select>
    </li>
    <li id="lenses">
      <label for="order_order_items_attributes_0_lens_tint">Lens Tint</label>
      <select data-validate="true" id="order_order_items_attributes_0_lens_tint_id" name="order[order_items_attributes][0][lens_tint_id]">
        <option value=""/>
        <option value="11">Amber</option>
      </select>
    </li>
  </ol>
</fieldset> 

script.js

var new_order = {
    "type": "Formtastic::SemanticFormBuilder",
    "inline_error_class": "inline-errors",
    "validators": {
        "order[order_items_attributes][0][customer_attributes][name]": {
            "presence": {
                "message": "can't be blank"
            }
        },
        "order[order_items_attributes][0][customer_attributes][email]": {
            "format": {
                "message": "please enter a valid email for the customer",
                "with": /^([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})$/i,
                "allow_blank": true
            }
        },
        "order[order_items_attributes][0][frame_id]": {
            "presence": {
                "message": "can't be blank"
            }
        },
        "order[order_items_attributes][0][color_id]": {
            "presence": {
                "message": "can't be blank"
            }
        },
        "order[order_items_attributes][0][lens_tint_id]": {
            "presence": {
                "message": "can't be blank"
            }
        },
        "order[store_id]": {
            "presence": {
                "message": "Please select what store this order is for"
            }
        },
        "order[sales_person]": {
            "presence": {
                "message": "can't be blank"
            }
        }
    }
};