7-0 Form Element
First Name*
Please enter your First Name
<div class="row form-elt">
  <div class="columns medium-4">
    <div class="marged padded">
      <span class="form-title">First Name<span class="redstar">*</span></span>
    </div>
  </div>
  <div class="columns medium-4">
    <div class="marged padded">
      <input type="text" placeholder="Text field"/>
    </div>
  </div>
  <div class="columns medium-4">
    <div class="marged padded">
      <span class="form-error">Please enter your First Name</span>
    </div>
  </div>
</div>

Note: the red star showing that the element is required can be added with the following code: <span class="redstar">*</span>

7-A Input Field
First Name
Enter your First Name
<input type="text" placeholder="Enter your First Name"/>
7-B Date Picker

The Date Picker plugin provides an easy way to select a date.

Usage with HTML attribute

<input type="text" id="birthday" name="birthday" value="" data-aau="datepicker" placeholder="mm/dd/yyyy"/>

Usage with Javascript

(function($){
  $('#birthday').datepicker();
})(jQuery);

HTML Attributes

Name Type Default Required Description Example
data-dp-autoclose boolean true no Auto-close the Date Picker after selection of the date
<input type="text"
data-aau="datepicker"
data-dp-autoclose="false"/>
data-dp-weekdaysdisabled Array [] no Days of the week that will be disabled on the calendar. Values are 0 (Sunday) to 6 (Saturday). Example: [1] disable mondays
<input type="text"
data-aau="datepicker"
data-dp-weekdaysdisabled="[0,6]"/>
This will disable Sundays & Saturdays.
data-dp-format String 'mm/dd/yyyy' no The format of the date that will be used. Combination of d, dd, D, DD, m, mm, M, MM, yy, yyyy.
<input type="text"
data-aau="datepicker"
data-dp-format="dd/mm/yyyy"/>
data-dp-keyboardnav Boolean true no Whether or not the keyboard can be used for choosing a date.
<input type="text"
data-aau="datepicker"
data-dp-keyboardnav="false"/>
data-dp-minviewmode Number, String 0 or "days" no Set the view mode. 0 or "days" to select a day, 1 or "months" to only select a month, 2 or "years" to only select a year.
<input type="text"
data-aau="datepicker"
data-dp-minviewmode="months"/>
Will only give the ability to select a month.
data-dp-orientation String "top" no Specified fixed placement of the date picker. The value refers to the location of the input field relative to the date picker. Values possible: "left", "right", "top" or "bottom", "auto". You can mix two values together, ex: "top right".
<input type="text"
data-aau="datepicker"
data-dp-minviewmode="months"/>
Will only give the ability to select a month.
data-dp-startdate Date -Infinity no The earliest date that can be selected.
<input type="text"
data-aau="datepicker"
data-dp-startdate="12/10/1983"/>
All dates before December,10 1983 will be disabled.
data-dp-enddate Date Infinity no The maximum date that can be selected. Ex. "today", "10/12/2014".
<input type="text"
data-aau="datepicker"
data-dp-enddate="10/12/2014"/>
All dates after October,12 2014 will be disabled.
data-dp-startview Number, String 0 or "days" no The view the date picker shows when opening. 0 or "days" for days, 1 or "months" for months, 2 or "years" for years.
<input type="text"
data-aau="datepicker"
data-dp-startview="2"/>
This will open the date picker on the year selection.

Using Options with Javascript

You can use the options with Javascript by passing them in an object without the prefix "data-dp" in the option name.

$('#birthdate').datepicker({
  format: 'mm/dd/yyyy',
  enddate:'10/25/2013'
});

Methods

Name Parameter Description Example Live demo
show Show the element $('[data-aau="datepicker"]').datepicker('show')
hide Hide the element $('[data-aau="datepicker"]').datepicker('hide')

Events

Mutliple events can be bound on the form element.

Name Description Parameters Example
show Triggered when the date picker is opened -
$('#datepicker').on('show', function (ev) {
  ...
});
hide Triggered when the date picker is closed -
$('#datepicker').on('hide', function (ev) {
  ...
});
changeDate Triggered when the date is changed on a date picker -
$('#datepicker').on('changeDate', function (ev) {
  ...
});

Live Example

Birthday
« »
« »
« »
7-C Dropdown

The Dropdown plugin replaces every selectbox by a custom one. Its behaviors are the same as classic browser elements.

The plugin applies itself to all the selectboxes, that's why its usage is pretty much only with HTML. Some attributes can be passed to the plugin directly in HTML.

The first option that contains the dropdown description needs an empty value attribute to work with the Form Validation plugin: <option value="">Select an option</option>

Live Example

HTML Attributes

Name Type Default Required Description Example
disabled String no This attribute will disable the current select or the option that has the attribute
<select disabled>
	...
</select>

<option value="1" disabled>
	...
</option>
data-maxitemsvisible Number no This data attribute will limit the number of options visible when the dropdown is open.
<select data-maxitemsvisible="5">
	...
</select>

Usage with HTML Attribute

<select>
	<option value="">Select a departement</option>
	<option value="0" disabled>Acting</option>
	<option value="1">Advertising</option>
	<option value="2">Animation & Visual Effects</option>
	...
</select>

Usage with Javascript

(function($){
  $('#selectbox_id').dropdown();
})(jQuery);
7-D CheckBox
Checkbox
<div class="chkbox">
  <div class="bg">
    <input type="checkbox" value="None" id="chkbox1" name="check" />
    <div class="square"></div>
    <span class="icon-ok"></span>
  </div>
  <label class="text" unselectable="on" for="chkbox1">Choice 1</label>
</div>

If a checkbox has to be checked on the loading of a page, simply add the attribute checked:

<input type="checkbox" value="None" id="chkbox1" name="check" checked/>
7-E RadioButton

A radio button can have a label. Clicking on the label checks its radio button.

Radio Button Group

<div class="radiobtn">
  <div class="bg">
    <input type="radio" id="rdbtn1" name="rdbtn"/>
    <div class="circle"></div>
    <label class="dot"></label>
  </div>
  <label class="text" unselectable="on" for="rdbtn1">Yes</label>
</div>

If a radio button has to be selected on the loading of a page, simply add the attribute checked:

<input type="radio" id="rdbtn1" name="rdbtn" checked/>
7-J TextArea
<textarea rows="10" cols="40" placeholder="Text Area">Textarea field</textarea>
7-L Form Validation

The Form Validation plugin provides a validation system to inputs and forms.

HTML Form Attributes

Name Type Default Required Description Example
data-fv-ignored String "" no The plugin will ignore the validation of the form if this attribute is added to it
<form data-fv-ignored>
  ...
</form>

HTML Fields Attributes

Name Type Default Required Description Example
data-fv-ignored String "" no The plugin won't validate the current form element
<input type="text" data-fv-ignored/>
data-fv-formsubmit String "" yes The clickable element that will call the validation of the form
<a data-fv-formsubmit>Submit Form</a>

Validators

Validators are set as HTML attributes on the form elements

Name Type Default Required Description Example
required - - no The form element is required
<input type="text" required/>
data-fv-date - - no The form element needs to be a valid date ( format mm/dd/yyyy )
<input type="text" data-fv-date/>
data-fv-email - - no The form element needs to be a valid email address
<input type="text" data-fv-email/>
data-fv-maxlength Number - no The form element needs to have a maximum length
<input type="text"
data-fv-maxlength="10"/>
Makes the form element value to have at most 10 characters
data-fv-minlength Number 0 no The form element needs to have a minimum length
<input type="text" data-fv-minlength="3"/>
Makes the form element value to have at least 3 characters
data-fv-maxdate Date (mm/dd/yyyy) - no The date needs to be prior to the value
<input type="text"
data-fv-maxdate="11/28/2013"/>
Makes the date to be prior to November, 28 2013
data-fv-mindate Date (mm/dd/yyyy) - no The date needs to be posterior to the value
<input type="text" data-fv-mindate="10/01/2013"/>
Makes the date to be posterior to October, 01 2013
data-fv-max Number - no The form element needs to have a maximum value
<input type="text" data-fv-max="100"/>
Makes the form element value to be 100 or smaller
data-fv-min Number - no The form element needs to have a minimum value
<input type="text" data-fv-min="13"/>
Makes the form element value to be 13 or higher
data-fv-numeric - - no The form element needs to be a numeric value
<input type="text" data-fv-numeric/>
data-fv-phone - - no The form element needs to be a valid US phone number (format x-xxx-xxx-xxxx)
<input type="text" data-fv-phone/>
data-fv-range String - no The form element needs to be between two values; the minimum and maximum have to be separated by a dash sign
<input type="text"
data-fv-range="13-100"/>
Makes the form element value to be between 13 and 100
data-fv-rangelength String - no The form element needs to have a length range; the minimum and maximum have to be separated by a dash sign
<input type="text"
data-fv-rangelength="3-10"/>
Makes the form element value to be between 3 and 10 characters long
data-fv-url - - no The form element needs to be a valid URL address
<input type="text" data-fv-url/>

Notes on Validators

  • If you want an element to be optional but to respect rule(s), just add the data attribute of the rule(s). The validation will be applied only if the element is not empty.

Events

Mutliple events can be bound on the form element

Name Description Parameters Example
'FvFormValid' The form is valid. This event is triggered after the validation of the form.
$('#form').on('FvFormValid', function (ev, data) {
  ...
});
'FvFormInvalid' The form is not valid. This event is triggered after the validation of the form. countInvalid : number of invalid form elements
$('#form').on('FvFormInvalid', function (ev, data) {
  console.log(data.countInvalid + ' errors in the form');
});

Live Example

You can see an example of the FormValidation plugin here

7-M Upload Images
Upload Image(s)(default):
Select Image file(s) (or drag & drop images)
×
my_project_01.jpg 243k Processing ...
<div class="image-upload">
  <div class="uploader"/>
    <input type="file"/>
    <div class="upload-info">
      <span class="upload-title">Select Image file(s)</span>
      <span class="upload-subtitle">(or drag & drop images)</span>
    </div>
    <div class="uploading-info">
      <div class="progress">
        <div class="progress-bar" style="width:34%"></div>
        <div class="close">×</div>
      </div>
      <span class="upload-filename">my_project_01.jpg</span>
      <span class="upload-filesize">243k</span>
      <span class="upload-processing">Processing ...</span>
    </div>
  </div>
  <div class="images-container">
    <div class="upload-thumb">
      <div class="close">×</div>
      <img src="/vendors/docs/images/thumb-upload.png" alt="Thumb Upload">
      <span class="filename">my_project_01.jpg</span>
    </div>
  </div>
</div>
Hover on the field with file(s):
Select Image file(s) (or drag & drop images)
×
my_project_01.jpg 243k Processing ...
<div class="image-upload">
  <div class="uploader hover-file"/>
    ...
  </div>
</div>
Uploading:
Select Image file(s) (or drag & drop images)
×
my_project_01.jpg 243k Processing ...
<div class="image-upload">
  <div class="uploader uploading"/>
    ...
  </div>
</div>
Processing:
Select Image file(s) (or drag & drop images)
×
my_project_01.jpg 243k Processing ...
×
Thumb Upload my_project_01.jpg
<div class="image-upload">
  <div class="uploader processing"/>
    ...
  </div>
  <div class="images-container">
    <div class="upload-thumb">
      <div class="close">×</div>
      <img src="/vendors/docs/images/thumb-upload.png" alt="Thumb Upload">
      <span class="filename">my_project_01.jpg</span>
    </div>
  </div>
</div>
Error message:
Select Image file(s) (or drag & drop images)
×
my_project_01.jpg 243k Processing ...
×
Thumb Upload my_project_01.jpg
×
Thumb Upload my_project_01.jpg
×
Thumb Upload my_project_01.jpg
×
Thumb Upload my_project_01.jpg
×
Thumb Upload my_project_01.jpg
×
Thumb Upload my_project_01.jpg
×
Thumb Upload my_project_01.jpg
×
Thumb Upload my_project_01.jpg
“my_big_project.jpg” did not upload because it is too large. Total file size is 2MB.
7-N Upload Files
Upload file:
Choose file No files selected uploading file
Upload file processing:
Choose file No files selected uploading file
List uploaded files:
  • mybook_full.pdf
    ×
  • myotherbook_full.pdf
    ×
Choose file No files selected uploading file
<div class="upload">
  <ul class="list-files">
    <li class="file">
      <span>mybook_full.pdf</span>
      <div class="close">×</div>
    </li>
    <li class="file">
      <span>myotherbook_full.pdf</span>
      <div class="close">×</div>
    </li>
  </ul>
  <input type="file"/>
  <span class="button-upload"> Choose file</span>
  <span class="filname">No files selected</span>
  <span class="upload-processing">uploading file</span>
</div>
<div class="upload processing">
  ...
</div>
7-O Validate Form Button
Next
Previous
Previous
<div class="form-button">
  <span>Next</span>
</div>
<div class="form-button">
  <span>Previous</span>
</div>
<div class="form-button processing">
  <span>Previous</span>
</div>
Next
Previous
Previous
<div class="form-button right">
  <span>Next</span>
</div>
<div class="form-button right">
  <span>Previous</span>
</div>
<div class="form-button processing right">
  <span>Previous</span>
</div>


Submit
Submit
<div class="form-button red">
  <span>Submit</span>
</div>
<div class="form-button processing red">
  <span>Submit</span>
</div>
<input type="submit" value="Submit">
<input class="processing" type="submit" value="Submit">
7-Q Progress Indicator

Step 2: Lorem Lissum Datek Ut.

<div class="progress-bar">
  <h2>Step 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
  <div class="steps">
    <div class="step done"></div>
    <div class="step active"></div>
    <div class="step"></div>
    <div class="step"></div>
  </div>
</div>

Sign In