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