<form method="post" action="/jobs">
  <div class="row">
    <div class="small-12 columns">
      <h2><%= query.persisted? ? "Edit Query" : "New Query" %></h2>
    </div>

    <div class="large-8 columns">
      <label for="query_title">Title</label>
      <input type="text" id="query_title" name="query[title]" placeholder="validate CAN/2014-12 participants" value="<%=h query.title %>">
    </div>
    <div class="large-4 columns">
      <label for="query_author">Author</label>
      <input type="text" id="query_author" name="query[author]" placeholder="Pablo" value="<%=h query.author %>">
    </div>
    <div class="small-12 columns">
      <label for="query_sql">SQL</label>
      <textarea id="query_sql" name="query[sql]" placeholder="SELECT * FROM ..." rows="10"><%=h query.sql %></textarea>
    </div>
    <div class="small-12 columns">
      <input class="button primary" type="submit" value="Submit">
      <a class="button secondary" href="/">Cancel</a>
    </div>
  </div>
</form>

<p><%=h query.errors.full_messages.join(", ") %></p>

<form method="post" action="/jobs">
  <div class="row">
    <div class="small-12 columns">
      <h2><%= query.persisted? ? "Edit Query" : "New Query" %></h2>
    </div>

    <% if query.errors.any? then %>
      <div class="small-12 columns">
        <div data-alert class="alert-box alert">
          <h5>Error(s) on this form prevented validation:</h5>
          <ul>
            <% query.errors.full_messages.each do |error| %>
              <li><%= error %></li>
            <% end %>
          </ul>
          <a href="#" class="close">&times;</a>
        </div>
      </div>
    <% end %>

    <div class="large-8 columns">
      <label for="query_title">Title</label>
      <input type="text" required id="query_title" name="query[title]" placeholder="validate CAN/2014-12 participants" value="<%=h query.title %>">
    </div>
    <div class="large-4 columns">
      <label for="query_author">Author</label>
      <input type="text" required id="query_author" name="query[author]" placeholder="Pablo" value="<%=h query.author %>">
    </div>
    <div class="small-12 columns">
      <label for="query_sql">SQL</label>
      <textarea required id="query_sql" name="query[sql]" placeholder="SELECT * FROM ..." rows="10"><%=h query.sql %></textarea>
    </div>
    <div class="small-12 columns">
      <input class="button primary" type="submit" value="Submit">
      <a class="button secondary" href="/">Cancel</a>
    </div>
  </div>
</form>

Make forms more useable by adding validation and error messages
Make forms more useable by adding validation and error messages
