data-abide marks all fields as invalid

Question

I have this form:

<%= form_for(@building_shared_space, data: {abide:''}) do |f| %>
  ...
  <div class="field">
    <%= f.label :room_type, 'Room Type' %>
    <%= f.text_field :room_type, placeholder: 'Room Type', required: '' %>
    <%= content_tag(:small, 'Please enter a room type', class: 'error') %>
  </div>
  <div class="field">
    <%= f.label :description %>
    <%= f.text_field :description %>
  </div>
  <div class="field">
    <%= f.label :default -%>
    <%= f.check_box :default %>
  </div>
  ...

When I submit, it correctly highlights and displays a warning next to Room Type. However, it also makes the other form labels red. Why is this happening?

I'm using Foundation and Rails 4.

Answer 1

In order to make the <small class="error"> ... </small> work, it must be a sibling of the input. While it may look like putting the element after the input, which would be a sibling, would work, the code is affecting -all- siblings. (Which makes sense in 20/20 hind-sight.)

The wording of the documentation, can be interpreted (especially with little sleep) that the wrapping <div> is just for the sake of the example. However, having a parent element for the input control and the error message is mandatory. <DIV> just works incredibly well.

The Custom Named Patterns code example actually doesn't show a wrapping element. It also, to be fair, doesn't show an error message element. But this can mislead one to think the wrapping <div> is superfluous and just for the sake of explaining what's going on, rather than being a necessary component of making the right tree structure in the DOM to isolate validation behaviors.