New Tradesy Form Markup & Attrs

forms.html

<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 -->