Question

Where do I put the logic for the JQuery Validation plug-in to validate fields based on which one is visible?

<%= form_for @contact, html: { class: "form-horizontal" } do |f| %>

  <div class="control-group">
    <%= f.label :name, :class => 'control-label' %>
    <div class="controls">
      <%= f.text_field :name, class: 'required' %>
    </div>
  </div>

  <div class="control-group">
    <%= f.label "How would you like to be contacted?", :class => 'control-label' %>
    <div class="controls">
      <div class="btn-group" data-toggle="buttons-radio">
        <button class="btn" type="button" name="contact_type" id="email_button" value="email">
          Email
        </button>
        <button class="btn" type="button" name="contact_type" id="telephone_button" value="phone">
          Telephone
        </button>
      </div>
    </div>
  </div>

  <div class="control-group" id="email">
    <%= f.label :email, :class => 'control-label' %>
    <div class="controls">
      <%= f.text_field :email %>
    </div>
  </div>

  <div class="control-group" id="telephone">
    <%= f.label :telephone, :class => 'control-label' %>
    <div class="controls">
      <%= f.text_field :telephone %>
    </div>
  </div>

  <div class="control-group">
    <div class="controls">
      <%= f.submit "Submit", class: "btn btn-primary" %>
    </div>
  </div>
<% end %>

JavaScript

$(document).ready(function() {
  $('#email').hide();
  $('#telephone').hide();

  var email = false;
  var telephone = false;

  $('#email_button').click(function() {
    $('#email').show();
    $('#telephone').hide();

    email = true;
    telephone = false;
  });
  $('#telephone_button').click(function() {
    $('#telephone').show();
    $('#email').hide();

    telephone = true;
    email = false;
  });

  jQuery.validator.addMethod("phoneUS", function(phone_number, element) {
    phone_number = phone_number.replace(/\s+/g, "");
    return this.optional(element) ||
        phone_number.match(/^[2-9]\d{2}-[2-9]\d{2}-\d{4}$/);
  }, "Please specify a valid phone number");

  $('#new_contact').validate({
    ignore: ":hidden",
    rules: {
      'contact[name]': {
        required: true
      },
      'contact[email]': {
        required: true,
        email: true
      },
      'contact[telephone]': {
        required: true,
        phoneUS: true
      },
      'contact[description]': {
        required: true
      }
    },

    messages: {
      'contact[name]': {
        required: "Please provide a name."
      },
      'contact[telephone]': {
        required: "Please provide a valid telephone number."
      },
      'contact[description]': {
        required: "Please provide a description of the work you would like done."
      }
    },

    errorPlacement: function(error, element) {
      error.appendTo("#error");
    }

  });
});

Answer 1

You can use the ignore attribute in the plugin

$("#new_contact").validate({
  //All your options go here
  ignore: ':hidden'
});