Collapsing-Form-Fieldsets-with-Validation.markdown

Collapsing Form Fieldsets with Validation

When a field set is collapsed, inputs are hidden and labels float left to conserve space while previewing what is inside the field set.

A Pen by Kyle B. Johnson on CodePen.

License.

index.html

<div class="wrapper">
  <form id="theForm">

    <fieldset>
      <legend><a href='#one'>Fieldset #1 <i class="edit fi-pencil"></i></a></legend>

      <div class="row">
        
        <div class="small-12 columns">
          <label for="">Required</label>
          <input type="text" name="one" data-required />
        </div>
        
      </div>

      <div class="row">
        
        <div class="small-12 columns">
          <label for="">Optional</label>
          <input type="text" name="two" />
        </div>
        
      </div>
      
      <div class="row">
        
        <div class="small-12 medium-4 columns">
          <label>One</label>
          <input type="text" />
        </div>
        
        <div class="small-12 medium-4 columns">
          <label>Two</label>
          <input type="text" />
        </div>
        
        <div class="small-12 medium-4 columns">
          <label>Three</label>
          <input type="text" />
        </div>
        
      </div>

    </fieldset>
    
    <fieldset>
      <legend>Fieldset #2 <i class="edit fi-pencil"></i></legend>

      <div>
        <label for="">Required</label>
        <input type="text" name="three" data-required />
      </div>

      <div>
        <label for="">Optional</label>
        <input type="text" name="four" />
      </div>

    </fieldset>

    <button id="submit">Submit</button>
    
  </form>
</div><!-- ./wrapepr -->

script.js

$(document).ready(function() {

  //DOM is go!

  /**
   * FIELDSET TOGGLE
   */
  $( 'fieldset:not(:first-child)').addClass('collapse');
  $( 'legend' ).click(function() {
    $( this ).closest( 'fieldset' ).toggleClass( 'collapse' );
  });
  $( 'label' ).click(function() {
    $( this ).closest( 'fieldset' ).removeClass( 'collapse' );
  });


  /**
   * FORM VALIDATION
   * https://github.com/DiegoLopesLima/Validate
   */
  $('form').validate({
    onChange : true,
    onBlur: true,
    sendForm: false,
    eachValidField : function() {
      if( !$(this).val() ) {
        $(this).closest('div').removeClass('error').addClass('success').addClass('empty');
      } else {
        $(this).closest('div').removeClass('error').removeClass('empty').addClass('success');
      }
    },
    eachInvalidField : function() {
      $(this).closest('div').removeClass('success').addClass('error');
    },
    valid : function() {
      $( '#submit' ).text('Sending...');

      $.ajax({
        url: "http://vlxdigital.com/sandbox/echo.php",
        jsonp: "callback",
        dataType: "jsonp",
        data: $( '#theForm' ).serializeObject(),
        // work with the response
        success: function( data ) {
        	$( '#submit' ).text('Sent!');
          console.log( data ); // server response
        }
      });
    },
  });

}); // document ready


/**
 * Serialize Form to JSON
 * http://css-tricks.com/snippets/jquery/serialize-form-to-json/
 */
$.fn.serializeObject = function()
{
  var o = {};
  var a = this.serializeArray();
  $.each(a, function() {
    if (o[this.name]) {
      if (!o[this.name].push) {
        o[this.name] = [o[this.name]];
      }
      o[this.name].push(this.value || '');
    } else {
      o[this.name] = this.value || '';
    }
  });
  return o;
};

style.scss

.wrapper {
  width: 600px;
  min-width: 300px;
  max-width: 100%;
  margin: auto;
}

form {
  margin: 10px;

  legend:hover {
    cursor: pointer;

    i.edit {
      display: inline-block;
    }    
  }

  i.edit { display: none; }

  .inline {
    label, input {
      float: left;
      width: 100px;
    }
    input {
      padding: 0;
      border: 0;
      height: auto;
      box-shadow: none;
      background-color: inherit!important;
    }
    &:after {
      content: "";
      display: table;
      clear: both;
    }
  }

  button {
    font-size: 15px;
    color: white;
    padding: 10px 20px;
    float: right;
    background-color: #19438d;
  }

}

fieldset.collapse {
  div, .row, .columns, label {
    display: inline;
    width: auto;
    float: left;
    padding: 0;
  }
  .row:after {
    clear: none;    
  }
  label {
    margin-left: 10px;
  }
  input, .collapsable {
    display: none;
  }
  .inline * {
    float: none;
  }
}

legend a {
  color: inherit;
}


div.success:not(.empty) label {
  color: green;
  &:after {
    content:  " \2714";
  }
}
div.error label {
  color: red;
  &:after {
    content:  " \2718";
  }
}