Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
New Tradesy Form Markup & Attrs
<script>
var FormValidation = require('formValidation');
tradesyApp.page.formValidation = new FormValidation({el : foo});
// foo being whatever the page JS is already defining for attaching event listeners to
</script>
<div class="row" id="form-view">
<div class="form-wrapper">
<!--
// two required updates above the form to get new UI
// .row now needs #form-view
// and the form needs to be wrapped in .form-wrapper
// once we standardize all forms, we can lose these,
// but due to grid & foundation, this was the best I could do
-->
<form action="POST">
<fieldset>
<!-- wrap all non-form submitting elements in a fieldset -->
<input type="hidden" name="tradesy_synchronizer" value="foo" />
<h2>This be a title</h2>
<hr />
<!-- we use hr to provide line breaks amongst all groups of elements -->
<!--
// to require inline validation, add data-required attr, with one of the following:
//
// text : for just requiring any text
// text-min-length : require X min characters for text, passed in via minlength attr
// number : require only numbers, can take min / max length validation with min/maxlength attr, also add pattern="[0-9]*" attr for mobile device keyboard setting
// email : pass email format validation
// password : require X min characters for text, passed in via minlength attr
//
// all fields visually required unless class="opt" is added to label > span
//
// we wrap all inputs in a label to use the native label click event that :focuses the wrapped input, and we don't then need a for="" attr to find the corresponding ID
-->
<!-- regular text field -->
<label>
<span>Label Text</span>
<input id="foo" name="foo" type="text" value="" data-required="text-min-length" data-validation="Full name must be at least 2 characters." minlength="2" />
</label>
<small>if microcopy is required</small>
<hr />
<!-- email field -->
<label>
<span>Label Text</span>
<input id="email" name="email" type="email" value="" data-required="email" />
</label>
<hr />
<!-- w/ tooltip -->
<label>
<span data-tooltip tabindex="0">
Label Text
<!-- tooltip text // shown on :hover and :focus -->
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, pariatur cupiditate exercitationem suscipit eum totam sed optio cum nobis nemo veniam asperiores itaque molestias voluptatum nisi, tempora molestiae facere incidunt!
</div>
</span>
<input id="foo" name="foo" type="text" value="" data-required="text-min-length" data-validation="Full name must be at least 2 characters." minlength="2" />
</label>
<small>if microcopy is required</small>
<hr />
<!-- password field -->
<label class="toggleable">
<span>Label Text</span>
<span>
<input id="foo" name="foo" type="password" value="" data-required="password" minlength="4" />
<em>Show</em>
</span>
</label>
<hr />
<!-- match password field -->
<label class="toggleable" data-matched="match2">
<span>Label Text</span>
<span>
<input id="match" name="foo" type="password" value="" data-required="password" minlength="4" />
<em>Show</em>
</span>
</label>
<hr />
<!-- matched password field -->
<label class="toggleable" data-matched="match">
<span>Label Text</span>
<span>
<input id="match2" name="foo" type="password" value="" data-required="password" data-validation="Please enter your current password." minlength="4" />
<em>Show</em>
</span>
</label>
<hr />
<!-- number field -->
<label>
<span>Label Text</span>
<input id="foo" name="foo" type="password" value="" pattern="[0-9]*" data-required="number" data-validation="Please enter a zip code." minlength="5" />
</label>
<hr />
<!-- select -->
<label class="toggleable">
<span>Label Text</span>
<select id="foo" name="foo">
<option value="bar">Bar</option>
</select>
</label>
<hr />
<!-- textarea -->
<label>
<span class="opt">Label Text</span>
<textarea id="foo" name="foo"></textarea>
<small>Add a brief description about yourself, or your store, to help others get to know you.</small>
</label>
<hr />
<!-- checkbox / radio header -->
<h3>This is a header for checkbox or radios, if needed</h3>
<!-- checkbox -->
<div class="label">
<label for="checkbox-sms-enable-sms">
<input id="foo" name="foo" type="checkbox" value="foo" checked />
<span>Label Text</span>
</label>
</div>
<small class="checkbox-tip">if microcopy is required</small>
<hr />
<!-- radios -->
<div class="radios">
<div class="label">
<label>
<input id="foo" name="foo" type="radio" value="foo" checked data-required />
<span>Label Text</span>
</label>
</div>
<hr class="min" />
<div class="label">
<label>
<input id="foo" name="foo" type="radio" value="foo" checked data-required />
<span>Label Text</span>
</label>
</div>
</div>
<hr />
<!--
// two fields
// /shipping-info first & last name
-->
<div class="two">
<label>
<span>Label Text</span>
<input id="foo" name="foo" type="text" value="" data-required="text-min-length" data-validation="Full name must be at least 2 characters." minlength="2" />
</label>
<label>
<span>Label Text</span>
<input id="foo" name="foo" type="text" value="" data-required="text-min-length" data-validation="Full name must be at least 2 characters." minlength="2" />
</label>
</div>
<hr />
<!--
// short field
// /shipping-info phone
-->
<div class="half">
<label>
<span>Label Text</span>
<input id="foo" name="foo" type="text" value="" data-required="text-min-length" data-validation="Full name must be at least 2 characters." minlength="2" />
</label>
</div>
<hr />
<!--
// MM / YY
-->
<div class="date-fields" data-required>
<h3>Expiration Date</h3>
<div>
<label>
<input id="foo" name="foo" type="text" pattern="[0-9]*" maxlength="2" placeholder="MM" />
</label>
<label>
<input id="foo" name="foo" type="text" pattern="[0-9]*" maxlength="2" placeholder="YY" />
</label>
</div>
</div>
<hr />
<!--
// inline form
// /notification-settings SMS signup
-->
<div class="inline">
<label>
<span>Label text</span>
<input id="foo" name="foo" type="tel" value="" />
<small>microcopy</small>
</label>
<!--
// need data-not-submit on any <button> in a form
// that should not submit or clear it
-->
<button class="disabled" data-not-submit disabled>
Send Code
</button>
</div>
</fieldset>
<fieldset>
<!-- wrap all form submitting elements in another fieldset -->
<button id="foo" name="foo" data-submitted="Updating">
Update
</button>
<!--
// if a cancel is applicable
// also add class="two-buttons" to the parent fieldset
-->
<button class="cancel">
Cancel
</button>
</fieldset>
</form>
</div>
<!--/ .form-wrapper -->
</div>
<!--/ .row -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment