Teleflora uses a variety of inputs and labels. This section covers both the UI of these modules and also the active states, validation, and error handling.
<!-- responsive form fields start -->
<div class="container_4 d-container_12 clearfix top-margin">
<div class="grid_4 d-grid_6 alpha d-alpha">
<input type="text" value="Input without label" />
</div>
<div class="grid_4 d-grid_6 alpha">
<label>Generic Label</label>
<input type="text" value="This input field has 50% width" />
</div>
</div>
<!-- responsive form fields ends -->
|
<!-- form fields starts -->
<div class="form-field">
<label>
Generic Label + tool tip
<a class="icon-info" href="javascript:void(0);">
<span class="m-tooltip m-form-demo-tooltip">Demo of ToolTip element used on a form environment.</span>
</a>
</label>
<input type="text" value="Text input" />
</div>
<div class="form-field">
<label class="error-label">*required field - error style sample</label>
<input class="error-border" type="text" />
<span class="is-error">Please fill the required field</span>
</div>
<!-- form fields end -->
|
<!-- checkboxes start -->
<div class="custom-checkbox grid_2 d-grid_3">
<input type="checkbox" id="checkbox1" />
<label for="checkbox1" class="custom-checkbox-label"><span class="label-alt-text">Checkbox Label</span></label>
</div>
<div class="custom-checkbox grid_2 d-grid_3">
<input type="checkbox" id="checkbox2" checked/>
<label for="checkbox2" class="custom-checkbox-label" ><span class="label-alt-text">Checkbox Label</span></label>
</div>
<!-- checkboxes end -->
<!-- radio buttons start -->
<div class="custom-radio grid_2 d-grid_3">
<input id="radio1" type="radio" name="radio" value="value-a" />
<label for="radio1" class="custom-radio-label"><span class="label-alt-text">Radio Label</span></label>
</div>
<div class="custom-radio grid_2 d-grid_3">
<input id="radio2" type="radio" name="radio" value="value-b" checked /><label for="radio2" class="custom-radio-label"><span class="label-alt-text">Radio Label< /span></label>
</div>
<!-- radio buttons end -->
|
Below is a demo form to show the implementation of the jQuery Validation Plugin.
Please review the documentation of the jQuery Validation Plugin. Visit the link to find a guide on "formValidation.js" which centralizes the management and implementation of validation methods.
Demo form uses "demoValidation.js", a simplified version of formValidation.js
<!-- form container starts -->
<div class="l-content container_4 d-container_12">
<div class="l-content-wide l-wrapper">
<!-- form starts -->
<form id="demoForm" name="demoForm" class="m-account-form" action="#">
<div class="clearfix">
<div class="d-grid_6">
<label for="first_name">*First Name</label>
<input id="first_name" name="first_name" class="fluid" type="text"tabindex="1"/>
</div>
<div class="d-grid_6">
<label for="last_name">*Last Name</label>
<input id="last_name" name="last_name" class="fluid" type="text"tabindex="2"/>
</div>
<div class="d-grid_6">
<label for="email">*email</label>
<input id="email" name="email" class="fluid" type="email" tabindex="3">
</div>
<div class="d-grid_6">
<label for="phone_number">*Phone Number
<a class="icon-info pull-right" href="#">more info<span class="m-tooltip m-form-demo-tooltip" >This is just a test form.</span></a>
</label>
<input id="phone_number" name="phone_number" class="fluid" type="tel" tabindex="4"/>
</div>
<div class="d-grid_6">
<label for="country">*Country</label>
<select id="country" name="country" class="country" tabindex="5">
<option value="">Select Country</option>
<option value="United States">United States</option>
</select>
</div>
<div class="d-grid_6">
<label for="zip">*Zip/Postal Code</label>
<input id="zip" name="zip" class="zip fluid" type="text" tabindex="6"/>
</div>
<div class="clear"></div>
<div class="d-grid_6">
<div class="custom-checkbox">
<input type="checkbox" id="noCheckCard">
<label for="noCheckCard" class="custom-checkbox-label"><span class="label-alt-text">Do Not ask for a Credit Card</label>
</div>
<label for="cc_number">*Card Number</label>
<input id="cc_number" name="cc_number" class="fluid" type="text" tabindex="9"/>
</div>
<div class="clear"></div>
<div class="d-grid_6">
<input id="demoBtn" name="demoBtn" type="submit" class="btn btn-submit show-response" value="test validation" tabindex="15"/>
</div>
</div>
</form>
<!-- form ends -->
</div>
</div>
<!-- form container ends -->
|
The main file used from the plugin download is: "jquery.validate.min.js"
The file "additional-methods.min.js" (that also comes with the download) offers a series of methods designed to do some special case validation (i.e zip codes, phone numbers, license plates, etc).
Some methods from "additional-methods.js" were taken, modified and used on the file "formValidation.js", which has all the Client Side Form Validation rules, handlers and methods for the Teleflora site.
The way the Jquery Validation Plugin works is by providing a platform to reduce the amount of code that has to be written to accommodate most of the form validation needs. This does not mean that it's an all in one solution, it still needs to be tailored, and sometimes different form validation functions with it's own exclusive element and business rules have to be coded.
This is why the plugin also comes with different types of possibilities to do customization. Extended documentation can be found on the plugin site and through out coding forums.
On its most simple form, the Validator Plugin works setting up RULES and MESSAGES for those rules. Rules and messages are making reference to the "name" attribute of the form elements. Users can also create Rules referencing a "class", so that it covers a wider range of forms and inputs at the same time (the Teleflora site also uses this mechanism).
This document is a walk through the way "formValidation.js" file is organized, and explains the implementations created for Teleflora.
Three classes are used to display error messages, the SASS code is on "_forms.scss":
is-error: used for the error message displayed under an invalid form element. It is used inside a <span> tag that it's generated by the plugin, this is one of the main modifications to the "jquery.validate.min.js" file.
error-border: used for the outline of the invalid form element. It is used inside a <input> tag
error-label: used on the labels of the invalid form element. It is used inside a <label> tag
The validation functions used where created to accommodate custom behaviors and rules for proper user interaction and input field consistency in combination with the Validation Plugin, they are called by element handlers.
validateTextArea: tests to see if an input text area is empty.
It's called by the "requiredZipTeleflora" added method to verify zip codes according to site rules.
updateRecipient: used on "New Gift Reminders" page, it clears first and last name text areas when a recipient is chosen from the select box.
It's called by the #recipient select
updateTxtChck: used on "Edit Reminders" page, it clears the mobile phone number text input area if no check box for text messages is selected.
It's called by #five_days_text and #tend_days_text checkboxes
updateTerritory: used to remove error messages from the State/Territory select when a choice is selected.
It's called by .state .province and .territory selects.
validateCountry: used when the country select is used. It removes error labels when a choice is selected and updates the State/Territory select for US states and Canadian territories, and a text input area for another country when applicable.
It has a special validation case that it's used on the "Delivery Info" page, where there might be more than one item for checkout.
It's called by .country selects.
getCreditCardType: used when validating credit card number input. It determines the type of credit card by looking at the first number typed, this is used to make the credit card logo active and stand out from the other logos.
It gets called by "keyupHandler" that is bind to a #cc_number text input area.
keyupHandler: used as a handler function by the 'keyup' trigger for a #cc_number text input area.
It makes a credit card logo active and stand out from the other logos.