/*--------------------------------------------------------------------------
jq-idealforms 2.0
* Author: Cedric Ruiz
* License: GPLv2
* Demo: http://elclanrs.github.com/jq-idealforms/
--------------------------------------------------------------------------*/
;(function ($) {
'use strict';
/*--------------------------------------------------------------------------*/
/**
* @namespace A chest for various Utils
*/
var Utils = {
/**
* Get width of widest element in the collection.
* @memberOf Utils
* @param {jQuery object} $elms
* @returns {number}
*/
getMaxWidth: function ($elms) {
var maxWidth = 0
$elms.each(function () {
if ($(this).outerWidth() > maxWidth) {
maxWidth = $(this).outerWidth()
}
})
return maxWidth
},
/**
* Hacky way of getting LESS variables
* @memberOf Utils
* @param {string} name The name of the LESS class.
* @param {string} prop The css property where the data is stored.
* @returns {number, string}
*/
getLessVar: function (name, prop) {
var value = $('<p class="' + name + '"></p>').hide().appendTo('body').css(prop)
$('.' + name).remove()
return (/^\d+/).test(value) ? parseInt(value, 10) : value
}
}
/*--------------------------------------------------------------------------*/
/**
* @namespace Contains LESS data
*/
var LessVars = {
fieldWidth: Utils.getLessVar('ideal-field-width', 'width')
}
/*--------------------------------------------------------------------------*/
/**
* A custom <select> menu jQuery plugin
* @example `$('select').toCustomSelect()`
*/
$.fn.toCustomSelect = function () {
return this.each(function () {
var $select = $(this)
/**
* Markup and elements of custom select
* @memberOf $.fn.toCustomSelect
* @returns {object} All elements of the new select replacement
*/
var Select = (function () {
var $options = $select.find('option'),
$newSelect = $('<ul class="ideal-select"/>'),
$menu = $('<li><span class="title">' + $options.filter(':selected').text() + '</span></li>'),
items = (function () {
var items = []
$options.each(function () {
var $this = $(this)
items.push('<li><span class="item" ideal-value="' + $this.val() + '">' + $this.text() + '</span></li>')
})
return items
}())
$menu.append('<ul class="sub">' + items.join('') + '</ul>')
$newSelect.append($menu)
return {
options: $options,
select: $newSelect,
title: $menu.find('.title'),
sub: $menu.find('.sub'),
items: $menu.find('.sub li')
}
}())
/**
* @namespace Methods of custom select
* @memberOf $.fn.toCustomSelect
*/
var Actions = {
/**
* @private
*/
init: (function () {
$select.css({
position: 'absolute',
left: '-9999px'
})
Select.select.insertAfter($select)
Select.sub.hide()
Select.items.eq(Select.options.filter(':selected').index()).find('span').addClass('selected')
}()),
noWindowScroll: function (e) {
if (e.which === 40 || e.which === 38 || e.which === 13) {
e.preventDefault()
}
},
// Fix loosing focus when scrolling
// and selecting item with keyboard
focusHack: function () {
setTimeout(function () {
$select.trigger('focus')
}, 1)
},
focus: function () {
Select.select.addClass('focus')
$(document).on('keydown.noscroll', Actions.noWindowScroll)
},
blur: function () {
Select.select.removeClass('open focus')
$(document).off('.noscroll')
},
scrollIntoView: function (dir) {
var $selected = Select.items.find('.selected').parent(),
itemHeight = $selected.outerHeight(),
menuHeight = Select.sub.outerHeight(),
isInView = (function () {
var elPos = $selected.position().top + itemHeight
return dir === 'down'
? elPos <= menuHeight
: elPos > 0
}())
if (!isInView) {
itemHeight = (dir === 'down')
? itemHeight
: -itemHeight
Select.sub.scrollTop(Select.sub.scrollTop() + itemHeight)
}
},
scrollToItem: function () {
var idx = Select.items.find('.selected').parent().index(),
height = Select.items.outerHeight(),
items = Select.items.length,
allHeight = height * items,
curHeight = height * (items - idx)
Select.sub.scrollTop(allHeight - curHeight)
},
showMenu: function () {
Select.sub.show()
Select.select.addClass('open')
Actions.select(Select.options.filter(':selected').index())
Actions.scrollToItem()
},
hideMenu: function () {
Select.sub.hide()
Select.select.removeClass('open')
},
select: function (idx) {
Select.items.find('span').removeClass('selected')
Select.items.eq(idx).find('span').addClass('selected')
},
change: function (idx) {
var text = Select.items.eq(idx).text()
Actions.select(idx)
Select.title.text(text)
Select.options.eq(idx).prop('selected', true)
$select.trigger('change')
},
keydown: function (key) {
var idx = Select.items.find('.selected').parent().index()
/**
* @namespace Key pressed
*/
var keys = {
9: function () { // TAB
if (Select.select.is('.menu')) {
Actions.blur()
Actions.hideMenu()
}
},
13: function () { // ENTER
if (Select.select.is('.menu')) {
Select.select.is('.open')
? Actions.hideMenu()
: Actions.showMenu()
}
Actions.change(idx)
},
27: function () { // ESC
if (Select.select.is('.menu')) Actions.hideMenu()
},
40: function () { // DOWN
if (idx < Select.options.length - 1) {
Select.select.is('.open')
? Actions.select(idx + 1)
: Actions.change(idx + 1)
}
Actions.scrollIntoView('down')
},
38: function () { // UP
if (idx > 0) {
Select.select.is('.open')
? Actions.select(idx - 1)
: Actions.change(idx - 1)
}
Actions.scrollIntoView('up')
},
'default': function () { // Letter
var letter = String.fromCharCode(key),
selIdx = Select.items.find('.selected').parent().index(),
curIdx = Select.items.filter(function () {
var re = new RegExp('^' + letter, 'i')
return re.test($(this).text())
}).first().index()
Actions.change(!~curIdx ? selIdx : curIdx)
Actions.scrollToItem()
Actions.focusHack()
}
}
keys[key] ? keys[key]() : keys['default']()
}
}
/**
* @namespace Holds all events of custom select for "menu mode" and "list mode"
* @memberOf $.fn.toCustomSelect
*/
var events = {
focus: Actions.focus,
'blur.menu': function () {
Actions.blur()
Actions.hideMenu()
},
'blur.list': function () {
Actions.blur()
},
keydown: function (e) {
Actions.keydown(e.which)
},
'clickItem.menu': function () {
Actions.change($(this).index())
Actions.hideMenu()
},
'clickItem.list': function () {
Actions.change($(this).index())
},
'clickTitle.menu': function () {
Actions.focus()
Actions.showMenu()
$select.trigger('focus')
},
'hideOutside.menu': function () {
$select.off('blur.menu')
$(document).on('mousedown.ideal', function (evt) {
if (!$(evt.target).closest(Select.select).length) {
$(document).off('mousedown.ideal')
$select.on('blur.menu', events['blur.menu'])
} else {
Actions.focusHack()
}
})
},
'mousedown.list': function () {
Actions.focusHack()
}
}
// Bind events
var disableEvents = function () {
Select.select.removeClass('menu list')
$select.off('.menu .list')
Select.items.off('.menu .list')
Select.select.off('.menu .list')
Select.title.off('.menu .list')
}
// Menu
Select.select.on('menu', function () {
disableEvents()
Select.select.addClass('menu')
Actions.hideMenu()
$select.on({
'blur.menu': events['blur.menu'],
'focus.menu': events.focus,
'keydown.menu': events.keydown
})
Select.select.on('mousedown.menu', events['hideOutside.menu'])
Select.items.on('click.menu', events['clickItem.menu'])
Select.title.on('click.menu', events['clickTitle.menu'])
})
// List
Select.select.on('list', function () {
disableEvents()
Select.select.addClass('list')
Actions.showMenu()
$select.on({
'blur.list': events['blur.list'],
'focus.list': events.focus,
'keydown.list': events.keydown
})
Select.select.on('mousedown.list', events['mousedown.list'])
Select.items.on('mousedown.list', events['clickItem.list'])
})
Select.select.on('menu') // Default to "menu mode"
})
}
/*--------------------------------------------------------------------------*/
/**
* A custom <input type="radio|checkbox"> jQuery plugin
* @example `$(':radio, :checkbox').toCustomRadioCheck()`
*/
$.fn.toCustomRadioCheck = function () {
return this.each(function () {
var $this = $(this),
$span = $('<span/>')
$this.is(':checkbox') ? $span.addClass('ideal-check') : $span.addClass('ideal-radio')
if ($this.is(':checked')) $span.addClass('checked')
$span.insertAfter($this)
$this
.css({
position: 'absolute',
left: '-9999px'
})
.on({
change: function () {
var $this = $(this)
$this.trigger('focus')
if ($this.is(':radio')) {
$this.parent().siblings('label').children('.ideal-radio').removeClass('checked')
$this.next('.ideal-radio').addClass('checked')
} else {
$this.is(':checked')
? $span.addClass('checked')
: $span.removeClass('checked')
}
},
focus: function () {
$span.parent().addClass('focus')
},
blur: function () {
$span.parent().removeClass('focus')
},
click: function () {
$(this).trigger('focus')
}
})
})
}
/*--------------------------------------------------------------------------*/
/**
* @namespace All default filters used for validation
*/
var Filters = {
number: {
regex: /\d+/,
error: 'Must be a number.'
},
digits: {
regex: /^\d+$/,
error: 'Must be only digits.'
},
name: {
regex: /^[A-Za-z]{3,}$/,
error: 'Must be at least 3 characters long, and must only contain letters.'
},
username: {
regex: /^[a-z](?=[\w.]{3,31}$)\w*\.?\w*$/i,
error: '名前の項目のエラーです。エラーメッセージはこのように表示されます。問題なければ別のメッセージが表示されます。'
},
pass: {
regex: /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}/,
error: 'パスワードの項目のエラーです。エラーメッセージはこのように表示されます。問題なければ別のメッセージが表示されます。'
},
strongpass: {
regex: /(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$/,
error: 'パスワードが弱い場合のエラーメッセージです。問題なければ別のメッセージが表示されます。'
},
email: {
regex: /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/,
error: 'メールアドレスのかき方が違うみたいです。'
},
phone: {
regex: /^[2-9]\d{2}-\d{3}-\d{4}$/,
error: '電話番号のかき方が違うみたいです。'
},
zip: {
regex: /^\d{5}$|^\d{5}-\d{4}$/,
error: '郵便番号が存在しないみたいです。みたいなエラーを出します。'
},
url: {
regex: /^(?:(ftp|http|https):\/\/)?(?:[\w\-]+\.)+[a-z]{3,6}$/i,
error: 'URLのエラー項目でエラーがあるみたいです。'
},
min: {
regex: function (input, value) {
var min = input.userOptions.data.min
if (input.input.is(':checkbox, :radio')) {
this.error = '最低でも<strong>' + min + '</strong>文字は使ってください'
return input.input.filter(':checked').length >= min
}
this.error = '少なくとも<strong>' + min + '</strong>文字の長さでなければなりません。'
return value.length > min - 1
}
},
max: {
regex: function (input, value) {
var max = input.userOptions.data.max
this.error = '最大で<strong>' + max + '</strong>文字までです。'
return value.length <= max
}
},
date: {
regex: function (input, value) {
var match = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/.exec(value),
isDate = function (m, d, y) {
return m > 0 && m < 13 && y > 0 && y < 32768 && d > 0 && d <= (new Date(y, m, 0)).getDate()
}
return match && isDate(match[1], match[2], match[3])
},
error: '誕生日は05/30/1979という形で入力します。</em>'
},
exclude: {
regex: function (input, value) {
this.error = '"' + value + '" は使用できません'
return !~$.inArray(value, input.userOptions.data.exclude)
}
}
}
/*--------------------------------------------------------------------------*/
/**
* @namespace jq-idealforms jQuery plugin
*/
$.fn.idealforms = function (ops) {
// Default options
var o = $.extend({
inputs: {},
onSuccess: function (e) {
alert('送信されました。（これはダミーです）')
},
onFail: function () {
// What happens on submit if the form
// does NOT validate.
alert('入力ミスがアルっぽいです。入力内容を確認して下さい。')
},
filters: {
// Add your own filters
// ie. myfilter: { regex: /something/, error: 'My error' }
},
responsiveAt: 'auto',
customInputs: true
}, ops)
// Merge custom and default filters
$.extend(true, Filters, o.filters)
/*--------------------------------------------------------------------------*/
var $form = this,
/**
* @namespace All form inputs of the given form
* @memberOf $.fn.idealforms
* @returns {object}
*/
FormInputs = (function () {
var $inputs = $form.find('input, select, textarea, :button'),
$labels = $form.find('label:first-child'),
$text = $inputs.filter(':text, :password, textarea'),
$select = $inputs.filter('select'),
$radiocheck = $inputs.filter(':checkbox, :radio'),
$buttons = $inputs.filter(':button')
return {
inputs: $inputs,
labels: $labels,
text: $text,
select: $select,
radiocheck: $radiocheck,
buttons: $buttons
}
}())
/*--------------------------------------------------------------------------*/
/**
* @namespace Methods of the form
* @memberOf $.fn.idealforms
*/
var Actions = {
/** Create validation elements and neccesary markup
* @private
*/
init: (function () {
var insertNewEls = function ($field) {
var error = '<span class="error" />',
valid = '<i class="icon valid-icon" />',
invalid = $('<i/>', {
'class': 'icon invalid-icon',
click: function () {
var $this = $(this)
if ($this.siblings('label').length) { // radio & check
$this.siblings('label:first').find('input').focus()
} else {
$this.siblings('input, select, textarea').focus()
}
}
})
$(error).hide().insertAfter($field)
$(valid).add(invalid).hide().appendTo($field)
}
$form.css('visibility', 'visible').addClass('ideal-form')
$form.children('div').addClass('ideal-wrap')
// Add novalidate tag if HTML5.
FormInputs.inputs.attr('novalidate', 'novalidate')
// Autocomplete causes some problems...
FormInputs.inputs.attr('autocomplete', 'off')
// Labels
FormInputs.labels
.addClass('ideal-label')
.width(Utils.getMaxWidth(FormInputs.labels))
// Text inputs & select
FormInputs.text.add(FormInputs.select).each(function () {
var $this = $(this)
$this.wrapAll('<span class="ideal-field"/>')
insertNewEls($this.parent())
})
// Radio & Checkbox
FormInputs.radiocheck
.parent()
.filter(':last-child')
.children()
.each(function () {
$(this).parent()
.siblings('label:not(.ideal-label)').andSelf()
.wrapAll('<span class="ideal-field ideal-radiocheck"/>')
})
insertNewEls(FormInputs.radiocheck.parents('.ideal-field'))
// Custom inputs
if (o.customInputs) {
FormInputs.buttons.addClass('ideal-button')
FormInputs.select.addClass('custom').toCustomSelect()
FormInputs.radiocheck.addClass('custom').toCustomRadioCheck()
}
// Placeholder support
if (!('placeholder' in $('<input/>')[0])) {
FormInputs.text.each(function () {
$(this).val($(this).attr('placeholder'))
}).on({
focus: function () {
if (this.value === $(this).attr('placeholder')) $(this).val('')
},
blur: function () {
$(this).val() || $(this).val($(this).attr('placeholder'))
}
})
}
}()),
/** Validates an input
* @memberOf Actions
* @param {object} input Object that contains the jQuery input object [input.input]
* and the user options of that input [input.userOptions]
* @param {string} value The value of the given input
* @returns {object} Returns [isValid] plus [error] if it fails
*/
validate: function (input, value) {
var isValid = true,
error = '',
userOptions = input.userOptions,
userFilters
if (userOptions.filters) {
userFilters = userOptions.filters
if (!value && /required/.test(userFilters)) {
if (userOptions.errors && userOptions.errors.required) {
error = userOptions.errors.required
} else {
error = 'ここは必須項目です。'
}
isValid = false
}
if (value) {
userFilters = userFilters.split(/\s/)
$.each(userFilters, function (i, uf) {
var theFilter = Filters[uf]
if (theFilter) {
if (
typeof theFilter.regex === 'function' && !theFilter.regex(input, value) ||
theFilter.regex instanceof RegExp && !theFilter.regex.test(value)
) {
isValid = false
error = (userOptions.errors && userOptions.errors[uf]) || theFilter.error
return false
}
}
})
}
} else {
isValid = true
}
return {
isValid: isValid,
error: error
}
},
/** Shows or hides validation errors
* @memberOf Actions
* @param {object} input jQuery object
* @param {string} evt The event on which `analyze()` is being called
*/
analyze: function (input, evt) {
var $input = FormInputs.inputs.filter('[name="' + input.attr('name') + '"]'),
userOptions = o.inputs[input.attr('name')] || '',
value = (function () {
var iVal = input.val()
if (iVal === input.attr('placeholder')) {
return
}
// IE8 and IE9 fix empty value bug
if (input.is(':checkbox, :radio')) {
return userOptions && ' '
}
return iVal
}())
// Validate
var test = Actions.validate({
input: $input,
userOptions: userOptions
}, value)
/**
* @namespace Validation elements
*/
var $field = input.parents('.ideal-field'),
$error = $field.next('.error'),
$invalid = (function () {
if ($input.is(':checkbox, :radio')) {
return input.parent().siblings('.invalid-icon')
}
return input.siblings('.invalid-icon')
}()),
$valid = (function () {
if ($input.is(':checkbox, :radio')) {
return input.parent().siblings('.valid-icon')
}
return input.siblings('.valid-icon')
}())
// Reset
$field.removeClass('valid invalid')
$error.add($invalid).add($valid).hide()
// Validates
if (value && test.isValid) {
$error.add($invalid).hide()
$field.addClass('valid')
$valid.show()
}
// Does NOT validate
if (!test.isValid) {
$invalid.show()
$field.addClass('invalid')
// hide error on blur
if (evt !== 'blur') $error.html(test.error).show()
}
},
/** Deals with responsiveness aka adaptation
* @memberOf Actions
*/
responsive: function () {
var maxWidth = LessVars.fieldWidth + FormInputs.labels.outerWidth()
if (o.responsiveAt === 'auto') {
$form.width() < maxWidth
? $form.addClass('stack')
: $form.removeClass('stack')
} else {
$(window).width() < o.responsiveAt
? $form.addClass('stack')
: $form.removeClass('stack')
}
// Labels
var $emptyLabel = FormInputs.labels.filter(function () {
return $(this).html() === ' '
})
$form.is('.stack') ? $emptyLabel.hide() : $emptyLabel.show()
// Custom select
var $customSelect = FormInputs.select.next('.ideal-select')
$form.is('.stack')
? $customSelect.trigger('list')
: $customSelect.trigger('menu')
}
}
/*--------------------------------------------------------------------------*/
/** Attach events to the form **/
FormInputs.inputs
.on('keyup change focus blur', function (e) {
Actions.analyze($(this), e.type)
})
.blur() // Start fresh
$form.submit(function (e) {
if ($form.find('.ideal-field.invalid').length) {
e.preventDefault()
o.onFail()
} else {
o.onSuccess()
}
})
// Responsive
if (o.responsiveAt) {
$(window).resize(function () {
Actions.responsive()
})
Actions.responsive()
}
return this
}
}(jQuery))
var $form = $('#my-form');
$form.idealforms({
inputs: {
'username': {
filters: 'required username exclude',
data: {
exclude: ['Paul', 'Mike']
}
},
'pass': {
filters: 'required pass',
},
'email': {
filters: 'email'
},
'date': {
filters: 'date'
},
'comments': {
filters: 'min max',
data: {
min: 50,
max: 200
}
},
'states': {
filters: 'exclude',
data: {
exclude: ['選択して下さい']
},
errors: {
exclude: '選択して下さい'
}
},
'langs[]': {
filters: 'min',
data: {
min: 2
},
errors: {
min: '<strong>2つ以上</strong>選択して下さい'
}
}
}
});
$form.find('input:first').focus();
body {
background:url("data:image/png;base64,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");
font: normal 15px/1.7 "Droid Sans", sans-serif;
color: #222;
}
h1, h2, h3 {
margin: 0;
padding: 0;
margin-bottom: .5em;
line-height: 1;
}
h1 {
font-size: 38px;
}
p {
margin: .5em 0 1em 0;
}
ul {
margin: 0;
padding: 0 1em;
}
li {
margin: .5em 0;
}
a:link,
a:visited {
color: #2680BF;
text-decoration: none;
border-bottom: 1px solid #2680BF;
font-weight: bold;
}
header {
padding: 15px 0;
margin-bottom: 60px;
background: #285E85;
}
footer {
padding: 40px 0;
margin-top: 60px;
background: #333;
color: white;
box-shadow: inset 1px 0 5px rgba(0,0,0,.85);
}
footer a:link,
footer a:visited {
color: white;
border-color: white;
}
#fork {
float: right;
margin: 0;
}
#copy {
display: inline-block;
margin: 0;
}
#title {
color: white;
font-size: 18px;
display: inline-block;
margin: 0;
line-height: 34px;
}
#calltoaction {
float: right;
margin: 0 2em;
line-height: 34px;
color: white;
}
#download {
float: right;
background: white;
padding: .3em 1.6em;
color: #285E85;
box-shadow: 0 0 5px rgba(0,0,0,.5);
border-radius: 2px;
}
#download:active {
position: relative;
top: 1px;
box-shadow: none;
}
.mycol {
padding-top: 14px;
}
#my-form {
border: 1px solid #ccc;
padding: 3em;
border-radius: 2px;
box-shadow: 0 0 2px rgba(0,0,0,.2);
}
#comments {
width: 350px;
height: 100px;
}
<div class="sevencol last">
<form id="my-form">
<div><label>名前:</label><input name="username" type="text"/></div>
<div><label>パスワード:</label><input name="pass" type="password"/></div>
<div><label>メール:</label><input name="email" type="text"/></div>
<div><label>誕生日:</label><input name="date" type="text" placeholder="mm/dd/yy"/></div>
<div>
<label>言語:</label>
<label><input type="checkbox" name="langs[]" value="japanese"/>日本語</label>
<label><input type="checkbox" name="langs[]" value="English"/>英語</label>
<label><input type="checkbox" name="langs[]" value="Chinese"/>中国語</label>
<label><input type="checkbox" name="langs[]" value="Spanish"/>スペイン語</label>
<label><input type="checkbox" name="langs[]" value="French"/>フランス語</label>
<label><input type="checkbox" name="langs[]" value="German"/>ドイツ語</label>
<label><input type="checkbox" name="langs[]" value="Korean"/>韓国語</label>
</div>
<div><label>ラジオボタン:</label>
<label><input type="radio" name="radio"/>りんご</label>
<label><input type="radio" name="radio"/>バナナ</label>
<label><input type="radio" name="radio"/>ぶどう</label>
</div>
<div><label>都道府県:</label>
<select name="states">
<option value="選択して下さい">選択して下さい</option>
<option value="東京">東京</option>
<option value="福岡">福岡</option>
<option value="京都">京都</option>
<option value="大阪">大阪</option>
<option value="福島">福島</option>
<option value="広島">広島</option>
<option value="北海道">北海道</option>
<option value="山形">山形</option>
<option value="新潟">新潟</option>
<option value="京都">京都</option>
<option value="三重">三重</option>
<option value="富山">富山</option>
</select></div>
<div><label>コメント:</label><textarea id="comments" name="comments"></textarea></div>
<div><label> </label><button type="submit">送信</button></div>
<div style="clear: both;"></div>
</form>
</div>