/*------------------------------------ --------------------------------------
jq-idealforms 2.1
* Autor: Cedric Ruiz
* Lizenz: GPL oder MIT
* Demo: http://elclanrs.github.com/jq-idealforms/
*
------- -------------------------------------------------- -----------------*/
;(function ( $, window, document, undefiniert ) {
'use strict';
// Globaler Ideal Forms-Namespace
$.idealforms = {}
$.idealforms.filters = {}
$.idealforms.errors = {}
$.idealforms.flags = {}
$.idealforms. ajaxRequests = {}
-
/*--------------- ---------------------------------------------*/
/**
* @namespace Eine Truhe für verschiedene Utils
*/
var Utils = {
/**
* Ermitteln Sie die Breite des breitesten Elements in der Sammlung.
* @memberOf Utils
* @param {jQuery object} $elms
* @returns {number}
*/
getMaxWidth: function( $elms ) {
var maxWidth = 0
$elms.each(function() {
var width = $(this).outerWidth()
if ( width > maxWidth ) {
maxWidth = width
}
})
return maxWidth
},
/**
* Hacky-Methode, WENIGER Variablen zu erhalten
* @memberOf Utils
* @param {string} name Der Name der LESS-Klasse.
* @param {string} prop Die CSS-Eigenschaft, in der die Daten gespeichert werden.
* @returns {number, string}
*/
-
getLessVar: function( name, prop ) {
var value = $('<p class="' + name + '">p>').hide().appendTo('body ').css( prop )
$('.' + name).remove()
return ( /^d+/. test( Wert ) ? parseInt( Wert, 10 ) : Wert )
},
/**
* Wie ES5-Objekt.Schlüssels
*/
getKeys: function( obj ) {
var keys = []
for(var key in
}
}
Eingabetasten
},
// Länge eines Objekts abrufen
getObjSize: function( obj ) {
-
var
size = - 0
, key;
-
for ( key in Größe++;
}
-
}
-
Rückgabegröße;
-
},
-
isFunction: function( obj ) {
-
return typeof
obj- === nbsp;'function'
- },
- isRegex: function( obj ) {
- return obj instanceof RegExp
},
-
isString: function( obj ) {
- return typeof
obj- === 'string'
- },
- getByNameOrId: function ( str ) {
- var $
el = $('[name
= "'+ str +'"- ]').length
- ? $('[
name
= "'+ str +'"- ]') //nach_Name
: $('#' + str) // by id
return $el.length
-
? $el
: $.error('Das Feld "'+ str + '" existiert nicht.')
},
getFieldsFromArray: function( fields ) {
var f = []
for ( var i = 0, l = fields.length; i < l; i++ ) {
f.push( Utils.getByNameOrId( fields [i] ).get(0) )
}
return $( f )
},
convertToArray: function( obj ) {
return Object.prototype.toString.call( obj ) === ' [object Array]'
? obj : [ obj ]
},
/**
* Bestimmen Sie den Typ eines beliebigen Idealforms-Elements
* @param $input jQuery $input-object
-
*/
getIdealType: function( $el ) {
var type = $el.attr('type') || $el[0].tagName.toLowerCase()
return (
/(text|password|email|number|search|url |tel|textarea)/.test( type ) && 'text' |
/file/.test( type ) ||
/select/.test( type ) && 'select' |
/(radio|checkbox)/.test( type ) |
/(button|submit|reset)/.test( type ) && 'button' || /hd/.test( type ) && 'heading' |
/hr/.test( type ) && 'separator' |
/hidden/.test ( type ) && 'hidden'
)
},
/**
* Erzeugt eine Eingabe
* @param name `name` Attribut der Eingabe
* @param type `type` oder `tagName` der Eingabe
*/
makeInput: function( Name, Wert, Typ, Liste, Platzhalter ) {
Var-Markup,
Elemente function splitValue( str ) {
var item, value, arr
if ( /::/.test( str ) ) {
arr = str.split('::')
item = arr[ 0 ]
value = arr[ 1 ]
} else {
item = value = str
}
return { item: item, value: value }
}
// Text & Datei
if ( /^(text|password|email|number|search|url|tel|file|hidden)$/.test(type) )
markup = '+
'type= "'+ type +'" '+
'id="'+ name +'" '+
'name="'+ name +'" '+
' value="'+ value +'" '+
(placeholder && 'placeholder="'+ Platzhalter +'"') +
'/>'
// Textarea
if ( /textarea/.test( type ) ) {
markup = '+ Name +'" Name="'+ Name +'" Wert="'+ Wert +'" >textarea>'
}
// Select
if ( /select/.test( type ) ) {
items = []
for ( i = 0, len = list.length; i < len; i++ ) {
item = splitValue( list[ i ] ).item
value = splitValue( list[ i ] ).value
items.push('<option value="'+ value +'" >'+ Element +'Option>')
}
Markup =
'+ Name +'" name="'+ name +'">'+
items.join( '') +
'auswählen>'
}
// Radiocheck
if ( /(radio|checkbox)/.test( type ) ) {
items = []
for ( i = 0, len = list.length; i len; i++ ) {
-
item = splitValue( list[ i ] ).item
-
value = splitValue ( list[ i ] ).value
- items.push(
- '
<label>'+
- '
<Eingabe Typ="'+ type +'" name="'+ name +'" value="'+ value +'" />'+
- item +
- '
Label>'
- )
- }
-
markup = items.join('')
- }
- return markup
- }
- }
- /**
- * Benutzerdefinierte Registerkarten für Ideale Formulare
- */
- $
.fn.idealTabs = function (container) {
- var
- // Elemente
$Inhalt = dieser,
$ContainerContainer = container,
$wrapper = $('<ul class="ideal-tabs-wrap"/>'),
$tabs = ( function () {
var tabs = []
$contents.each(function () {
var name = $(this).attr('name')
var html =
''+
'<span>' + name + 'span>'+
'<i class="ideal-tabs-tab-counter ideal-tabs-tab-counter-zero">0i> '+
'li>'
tabs.push(html)
})
return $(tabs.join(''))
}()),
Actions = {
getCurIdx: function () {
return $tabs
.filter('.ideal-tabs-tab-active ')
.index()
},
getTabIdxByName: function (name) {
var re = new RegExp(name, 'i')
var $tab = $tabs.filter(function () {
return re.test($(this).text())
})
return $tab.index()
}
},
/**
* Öffentliche Methoden
*/
Methoden = {
/**
* Switch Tab
*/
switchTab: function (nameOrIdx) {
var idx = Utils.isString(nameOrIdx)
? Actions.getTabIdxByName(nameOrIdx)
: nameOrIdx
-
$tabs.removeClass('ideal-tabs-tab-active')
$tabs.eq(idx).addClass('ideal-tabs-tab-active')
$contents.hide().eq( idx).show()
},
nächstesTab: Funktion () {
var idx = Actions.getCurIdx() + 1
idx > $tabs.length - 1
? Methods.firstTab()
: Methods.switchTab(idx)
},
prevTab: function () {
Methods.switchTab(Actions.getCurIdx() - 1)
} ,
firstTab: function () {
Methods.switchTab(0)
} ,
lastTab: function () {
Methods.switchTab($tabs.length - 1)
},
updateCounter: function (nameOrIdx, text) {
var idx = !isNaN (nameOrIdx)? nameOrIdx : Actions.getTabIdxByName(name),
$counter = $tabs.eq(idx).find('.ideal-tabs-tab-counter' )
$counter.removeClass('ideal-tabs-tab-counter-zero')
if (!text) {
$counter.addClass('ideal-tabs-tab-counter-zero')
}
$counter.html(text)
}
}
// Anhängen Methoden
for (var m in Methoden)
$contents[m] = Methoden[m]
// Init
$tabs.first()
.addClass('ideal-tabs-tab-active')
.end()
.click(function () {
-
var name = $(this).text()
🎜>
$wrapper.append($tabs).appendTo($container)
$contents.addClass('ideal-tabs-content')
$contents.each(function () {
-
var $
this = $(this), - name
= $(this).attr('name')
$this.data('ideal-tabs-content-name', name)
.removeAttr('name') })
$contents.hide().first( ).show() // Neu starten
return $contents
}
/ **
-
* Ein benutzerdefiniertes
< - wählen>
Menü-jQuery-Plugin -
* @example `$('select').idealSelect()` -
*/ $
.fn.idealSelect = - function
() {
-
return this.each(function () {
-
var $
select = $(this) , - options
&nbnbsp;= $select.find('option')
/**
* @memberOf $.fn.toCustomSelect
-
* @returns {object} Alle Elemente des neuen select-Ersatzes
*/
-
var
idealSelect = (function () { - wrap
= $('<
ul - class
=
"ideal-select '+ $select .attr('name') +'" - />
'), $menu = $( '<
li - >
<
span - class
="ideal-select-title">' + $options.filter(':selected ').text() + 'span
>
- li
- >
' ), Elemente = (function () {
var - items
= []
$options.each(function ( ) {
var $this = $(this)
items.push('<li class="ideal-select-item">' + $this.text() + 'li>')
})
Artikel zurückgeben
}())
$menu.append('<ul class="ideal-select-sub">' + items.join('') + 'ul >')
$wrap.append($menu)
-
return {
select: $wrap,
title: $menu.find('.ideal-select-title'),
sub: $menu.find('.ideal-select-sub'),
items: $menu.find('.ideal-select-item')
}
}())
/**
* @namespace Methoden der benutzerdefinierten Auswahl
* @memberOf $.fn.toCustomSelect
*/
var Aktionen = {
getSelectedIdx: function () {
return idealSelect.items
.filter('.ideal-select-item-selected').index()
},
/**
* @private
*/
init: (function () {
-
$ select.css ({
-
Position : 'Absolute',
-
links: '-999px'
})
idealSelect.sub.hide()
idealSelect.select.insertAfter($ select)
idealSelect.select.css(
'min-width',
Utils.getMaxWidth(idealSelect.items)
)
idealSelect.items
.eq($options.filter(':selected').index())
.addClass('ideal-select-item-selected ')
}()),
noWindowScroll: function (e) {
-
if (e.which === 40 || e.which === 38 || e.which === 13) {
-
e.preventDefault ()
-
}
-
},
-
// Fokusverlust beim Scrollen
behoben //
-
setTimeout(function () {
$select.trigger('focus')
}, 1)
},
focus: function () {
idealSelect.select.addClass('ideal-select-focus')
-
$(document).on('keydown.noscroll', Actions.noWindowScroll)
},
blur: function () {
idealSelect.select
.removeClass('ideal-select-open ideal-select-focus')
$(document).off('.noscroll')
},
scrollIntoView: function (dir) {
var
$selected = idealSelect.items.filter('.ideal-select-item-selected'),
-
itemHeight = idealSelect .Items.OuterHeight (),
-
MenüHeight = idealSelect.sub.outerHeight(),
isInView = (function () {
-
// Relative Position zum Untermenü
-
var elpos = $ selected.position (). Top+itemHeight
-
return dir === 'down'
? elPos <= menuHeight
: elPos > 0
}())
if ( !isInView) {
itemHeight = (dir === 'down')
? itemHeight // nach unten gehen
: -itemHeight // nach oben gehen
idealSelect.sub
.scrollTop(idealSelect.sub.scrollTop() + itemHeight)
}
},
-
scrollToItem: function () {
var idx = Actions.getSelectedIdx(),
height = idealSelect.items.outerHeight(),
nItems = idealWählen .items.length,
curHeight = height * (nItems - idx)
idealSelect.sub.scrollTop(allHeight - curHeight) },
showMenu: function () {
-
idealSelect.sub.fadeIn('fast')
idealSelect.select.addClass('ideal-select-open')
Actions.select(Actions.getSelectedIdx())
-
Aktionen.ScrolltoItem ()
-
},
-
hidemenu: function () {
idealSelect.sub.hide()
idealSelect.select.removeClass('ideal-select-open')
},
select: function (idx) {
idealSelect.items .
- . removeClass('ideal-select-item-selected')
- idealSelect.items
- .eq(idx).addClass('ideal- select-item-selected')
- },
- change: function (idx) {
var text = idealSelect.items.eq(idx).text()
Aktionen. select(idx)
idealSelect.title.text(text)
$options.eq(idx).prop('selected', true)
$select.trigger('change')
},
keydown : Funktion (Taste) {
var
idx = Aktionen.getSelectedIdx() ,
isMenu = idealSelect.select.is('.ideal-select-menu'),
isOpen = idealSelect.select.is('.ideal-select-open')
/**
* @namespace Taste gedrückt
*/
var keys = {
-
9: function () { // TAB .
if (isMenu) {
Actions.blur() Actions.hideMenu()
}
},
13: function () { // ENTER
if (isMenu)
isOpen
Actions.hideMenu()
: Actions.showMenu()
Actions.change(idx)
-
},
27: function () { / ESC .
- if (isMenu) Actions.hideMen u()
- },
- 40: function () { / DOWN .
-
<
$options.length - 1) { isOpen
- ? Actions.select(idx + 1)
: Actions.change(idx + 1)
}
Actions.scrollIntoView('down' )
- >
wenn ( idx
>
0) { ? Actions.select(idx - 1)
: Actions.change(idx - 1)
}
Actions.scrollIntoView('up')
},
'default': function { // Buchstabe
var
-
Buchstabe = - String
.fromCharCode(key),
$matches = idealSelect.items
-
.filter(function () { return /^w+$/i.test( letter ) && // Modifizierertasten nicht zulassen (Strg, cmd, meta,
super ... )
-
nmatches = $ übereinstimmt. 🎜>.select.data('counter') + 1 || 0,
-
curKey = - idealSelect
.select.data('key') || Schlüssel,
// Keine Übereinstimmungen
-
// Bei mehr Übereinstimmungen mit demselben Buchstaben 🎜> if (curKey
=== key) {
if(counter < nMatches) {
idealSelect.select.data('counter ' , Zähler)
}
else {
idealSelect.select.data('counter ', 0)
- newIdx
= $matches.eq(0).index()
}
- }
- }
- keys[key]
- ? keys[key]()
- : keys['default']()
- }
- }
- /**
- * @namespace Hält alle Ereignisse der benutzerdefinierten Auswahl für "Menümodus" und "Listenmodus"
- * @memberOf $.fn. toCustomSelect
- */
- var
Ereignisse- = {
- focus: Actions.focus,
'blur.menu': function () { - Actions.blur ()
- Actions.hideMenu()
- },
- 'blur.list' : function () {
Actions.blur()
},
keydown: Funktion (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(idealSelect.select).length) {
$(document).off('mousedown.ideal')
$select.on('blur.menu', events['blur.menu'])
} else {
Actions.focusHack()
}
})
},
'mousedown.list': function () {
Actions.focusHack()
}
}
// Ereignisse zurücksetzen
var disableEvents = Funktion () {
idealSelect.select.removeClass('ideal-select-menu ideal-select-list')
-
$select.off('.menu .list')
idealSelect.items.off('.menu .list')
idealSelect.select.off('.menu .list')
idealSelect.title.off('.menu .list')
}
// Menümodus
idealSelect.select.on('menu', function () {
disableEvents()
idealSelect.select.addClass('ideal-select-menu')
Actions.hideMenu()
$select.on({
'blur.menu': events['blur.menu'],
'focus. menu': events.focus,
'keydown.menu': events.keydown
})
idealSelect.select.on('mousedown.menu', events['hideOutside.menu'])
idealSelect.items.on('click.menu', events ['clickItem.menu'])
idealSelect.title.on('click.menu', events['clickTitle.menu'])
-
})
// Listenmodus
idealSelect.select.on('list', function () {
disableEvents()
idealSelect.select.addClass('ideal-select-list')
Actions.showMenu()
$select.on({
'blur.list': events['blur.list'],
'focus.list': events.focus,
'keydown.list': events.keydown
})
idealSelect.select.on('mousedown.list', events['mousedown.list'])
idealSelect.items.on('mousedown.list', events['clickItem.list'])
})
$ select.keydown(function (e) {
// Standardmäßiges Keydown-Ereignis verhindern
// um Fehler mit „Ideal Select events“ zu vermeiden.
if (e.which !== 9) e.preventDefault()
})
// Zurücksetzen
idealSelect.select.on('reset', function(){
Actions.change(0)
})
idealSelect.select.trigger('menu') // Standardmäßig auf "Menümodus"
})
}
/*
* idealRadioCheck: jQuery plguin für Kontrollkästchen und Radioersatz >=
radio */ $.fn.idealRadioCheck =
function var $this = $(this)
var $span = $('<span/>')
$span.addClass( 'ideal-'+ ( $this.is(':checkbox') ? 'check' : 'radio' ) )
-
$this.is(':checked') && $span.addClass('checked') // init
$span.insertAfter( $this )
$this.parent('label').addClass('ideal-radiocheck-label')
.attr('onclick', '') // Fix Klick-Label in iOS
$this.css({ position: 'absolute', left: '-9999px' }) // ausblenden durch Verschieben left
// Events
$this.on({
change: function( ) {
var $this = $(this)
if ( $this.is('input[ type="radio"]') ) {
$this.parent().siblings('label').find( '.ideal-radio').removeClass('checked')
}
$span.toggleClass( 'checked', $this .is(':checked') )
},
focus: function() { $span.addClass('focus') },
blur: function() { $span.removeClass('focus') },
click: function() { $ (this).trigger('focus') }
})
})
}
;(function( $ ) {
// Browser unterstützt HTML5 mehrere Dateien?
var multipleSupport = typeof $('<input/ >')[0].multiple !== 'undefiniert',
isIE = /msie/i.test( navigator.userAgent )
$.fn.idealFile = function() {
return this.each (function() {
-
var $file = $(this).addClass('ideal-file'), // die ursprüngliche Dateieingabe
-
// Label, das für den IE-Hack verwendet wird >
div - class
="ideal-file-wrap">'),
$input = $('<input type="text" class="ideal-file-filename" />'),
// Schaltfläche, die in Nicht-IE-Browsern verwendet wird
$button = $('<button type="button" class="ideal-file-upload">Öffnen< ;/Button>'),
// Hack für IE
$label = $('<label class="ideal-file-upload" for="'+ $file[0].id +'">Openlabel>> Triggerereignisse
-
$file.focus().click() // Dialog öffnen -
- // alle Dateinamen aus dem Dateiarray
- if ( multipleSupport ) {
-
fileArr = $file[0].files
- for ( var
i = 0
, len- =
fileArr
.length; i <-
len
; i++ ) { files.push( fileArr[i].name )
}
Dateiname =" > & = $file. val().split('\').pop()
$input.on({
focus: function () { $file.trigger('change') },
blur: function () { $file.trigger('blur') },
keydown: function( e ) {
if (
e.which- e.which
=== 8 ||
e.which === 46 ) { // Rücktaste & Entf // mit diesem Trick entfernen wir die alte Eingabe und fügen hinzu 🎜>
- file
= $file.val('').clone( true ) )
$file.trigger('change' ) $input.val('')
} else if (
e.which-
} -
} -
})
})
}
}(jQuery))
-
/**
* @namespace Errors
* @locale en
*/
$.idealforms.errors = {
erforderlich: „Dies ist erforderlich.“,
Zahl: „Muss eine Zahl sein.“,
Ziffern: „Muss eine eindeutige Zahl sein.“ ,
Name: 'Muss mindestens 3 Zeichen lang sein und darf nur Buchstaben enthalten.',
Benutzername: ' Die Mindestlänge von Der Benutzername ist 5 Zeichen lang und die maximale Länge beträgt 30 Zeichen. Das erste Zeichen des Benutzernamens muss aus Buchstaben, Zahlen und chinesischen Zeichen bestehen. Die maximale Länge beträgt Das chinesische Schriftzeichen besteht aus 21 Zeichen.‘,
Pass: „Das Passwort muss zwischen 6 und 15 Ziffern sein und mindestens eine Zahl, einen Großbuchstaben und einen Kleinbuchstaben enthalten.“,
Strongpass: „Muss mindestens 8 Zeichen lang sein und mindestens einen Großbuchstaben und einen Kleinbuchstaben sowie eine Zahl oder ein Sonderzeichen enthalten.“,
-
E-Mail: „Muss eine gültige E-Mail-Adresse sein. /em>', phone: 'Muss eine gültige Mobiltelefonnummer sein <em
>- (Beispiel: 18723101212)
em>', > zip: 'Muss eine gültige US-Postleitzahl sein ;/em>',
- url: ' Muss eine gültige URL sein.
<em>(z. B. www.google.com)em >',
- minChar: 'Muss mindestens /
stark sein> Zeichen lang.', minOption: 'Überprüfen Sie mindestens < stark
>
{0} - strong> Optionen.', maxChar: 'Nicht mehr als < ;strong>
{0}- strong> Zeichen lang.' , maxOption: 'Nicht mehr als <strong>
{0}- < /
strong> Optionen zulässig.', Bereich: 'Muss eine Zahl zwischen sein {0} und {1}.',
Datum: 'Muss ein gültiges Datum sein 🎜><em> (z. B. {0})em>',
dob: 'Es muss sich um ein gültiges Geburtsdatum handeln.',
exclude: '"{0}" ist nicht verfügbar.',
excludeOption: '{0}',
equalto: 'Muss derselbe Wert sein wie < stark>"{0}"stark>',
Erweiterung: 'Datei(en) müssen eine gültige Erweiterung haben. <em>(z. B. "{0}")em >',
ajaxSuccess: '<strong>{0}strong> ist nicht verfügbar.',
ajaxError: 'Serverfehler...'
}
/**
* Alle Standardfilter abrufen
* @returns object
*/
var getFilters = function() {
var filters = {
erforderlich: {
Regex: /.+/,
Fehler: $.idealforms.errors.required
},
Zahl: {
regex: function( i, v ) { return !isNaN(v) },
Fehler: $.idealforms.errors.number
},
Ziffern: {
regex: /^d+$/,
error: $.idealforms.errors.digits
},
Name: {
regex: /^[A-Za-z]{3,}$/,
Fehler: $.idealforms.errors.name
},
Benutzername: {
regex: /^[a-z](?=[w.]{4,30}$)w*.?w*$/i,
-
error: $.idealforms.errors.username
},
pass: {
-
regex: /(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{6,}/,
Fehler: $.idealforms.errors.pass
},
strongpass: {
Regex: /(?=^.{8,}$)((?=.*d)|(?=.*W+))(?![.n])(?=.*[A-Z])(? =.*[a-z]).*$/,
error: $.idealforms.errors.strongpass
-
},
E-Mail: {
regex: /^([a-zA-Z0-9]*[-_.]?[a-zA-Z0-9]+)*@([a-zA-Z0 -9]*[-_]?[a-zA-Z0-9]+)+[\.][A-Za-z]{2,3}([\.][A-Za-z]{ 2})?$/,
error: $.idealforms.errors.email
},
Telefon: {
//regex: /^((13[0-9])|(15[0-9])|(17[0-9 ])|(18[0-9]))\d{8}$/,
regex: /^(0|86|17951)?(13[0-9 ]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/,
Fehler: $ .idealforms.errors.phone
},
zip: {
regex: / ^d{5}$|^d{5}-d{4}$/,
error: $.idealforms.errors.zip
-
},
url: {
regex: /^(?:(ftp|http|https)://) ?(?:[w-]+.)+[a-z]{2,6}([:/?#].*)?$/i,
error: $ .idealforms.errors.url
},
min: {
-
regex: Funktion ( Eingabe, >
min = - input
.userOptions.data.min,
isRadioCheck = $input.is('[ - type
="checkbox"], [type=
"radio" ]') if ( isRadioCheck ) { this.error = $.idealforms.errors.minOption.replace( '{0}', min )
- >
= min
}
- this.error
= $.idealforms.errors.minChar.replace( '{0}', min )
Rückgabewert. Länge - >
= min
}
max: {
regex: function( input, value) {
-
var $
input
- input
= input.input,
-
isRadioCheck- = $input.is('[
type="checkbox"], [type
= " radio"- ]')
if ( isRadioCheck ) {
this.error = $.idealforms.errors.maxOption.replace( '{0} ', max )
return $input.filter(':checked').length <= max
}
this.error = $.idealforms.errors.maxChar.replace( '{0}', max )
return value.length <= max
}
},
range: {
regex: function( input, value) {
var range = input.userOptions.data.range,
val = +value
this.error = $.idealforms.errors.range
.replace( '{0}', range[0] )
.replace( '{1}', range[1] )
return val >= range[0] && val <= range[1]
}
},
Datum: {
regex: function( input, value) {
var
userFormat =
input.userOptions.data && input.userOptions.data.date
? input.userOptions.data.date
: 'MM/TT/JJJJ', // Standardformat
Trennzeichen = /[^mdy]/.exec( userFormat )[0],
theFormat = userFormat.split(delimiter),
theDate = value.split(delimiter),
isDate = Funktion( Datum, Format ) {
var m, d, y
für ( var i = 0, len = format.length; i < len; i++ ) {
if ( /m/.test( format[i]) ) m = Datum[i]
-
if ( /d/.test( format[i]) ) d = Datum[i]
if ( / y/.test( format[i]) ) y = Datum[i]
}
return (
m > 0 && m < 13 &&
y && y.length === 4 &&
d > 0 && d <= ( new Date( y, m, 0 ) ).getDate()
)
-
}
this.error = $.idealforms.errors.date.replace( '{0}', userFormat )
-
return isdate (thedate, theformat)
-
}
-
},
-
-
🎜> dob: {
regex: function( input, value ) {
var
- userFormat
=
- input
.userOptions.data && input.userOptions.data.dob
? input.userOptions.data.dob
: 'mm/tt/jjjj', // Standardformat
// Simulieren eine Datumseingabe
- dateInput
= {
input: input.input,
userOptions: {
data: { date: userFormat }
}
},
- .date.regex( dateInput, value ),
// DOB
theYear = /d{4}/.exec( value ),
maxYear = new Date().getFullYear(), // Current Jahr
minYear = maxYear - 100
this.error = $.idealforms.errors.dob
return isDate && theYear >= minYear && theYear <= maxYear
}
},
exclude: {
regex: function( input, value ) {
var $ inputinput = input.input,
exclude = input.userOptions.data.exclude,
type="radio"], select') this.error = isOption
? $.idealforms.errors.excludeOption.replace( '{0}', value )
: - = $.idealforms.errors.exclude.replace ( '{0}', value )
- return $.inArray( value, exclude ) === -1
} - },
- equalto: {
- regex: function( input, value) {
- var $
equals- = $( input.userOptions.data.equalto ),
- $
inputinput
= input.input, name = $equals.attr('name') || $equals.attr('id'),
-
isValid = $equals.parents('.ideal-field')
- .filter(function(){ return $(this).data('ideal-isvalid') === true })
.length - if ( !isValid ) { return false }
this.error = $.idealforms.errors.equalto.replace( '{0}', name )
return $input.val() === $equals.val()
}
},
Erweiterung: {
regex: function( input, value ) {
nbsp;var Dateien = input.input[0].files || [{ name: value }],
> re = new
RegExp( '\.'+ extensions.join('|') +'$', 'i' ), -
gültig = falsch
für ( var i = 0
, - =
files.length; i < len; i++ ) { valid = re
.test( files[i].name ); }
- = $.idealforms.errors.extension.replace( '{0}' , extensions.join('", "') )
- return valid
} - },
- ajax: {
- regex: function( input, value, showOrHideError ) {
var - =
this
var $inputinput
= input. input var userOptions = input
.userOptions var Name = $input.attr('name')
- var $
field = $input.parents('.ideal-field')
- var
valid = false
var customErrors = userOptions
.errors && userOptions.errors.ajax self.error = {}
-
self. error.success = customErrors
&& customErrors.success ? customErrors.success
: $.idealforms.errors.ajaxSuccess.replace( '{0}', value )
self .error.fail = customErrors && customErrors.error
? customErrors.error
: $.idealforms.errors.ajaxError
// Eingabename als $_POST[Name] senden
var data = {}
data[ name ] = $.trim( value )
// Vom Benutzer definierte Ajax-Optionen
var userAjaxOps = input.userOptions.data .ajax
-
var ajaxOps = {
-
Typ: 'post',
dataType: 'json',
data: data,
success: function( bzw. {
console.log(resp)
showOrHideError( self.error.success, true )
$input.data({
'ideal-ajax-resp': resp,
': selbst .error.success
})
$input.trigger('change') // zum Zähler aktualisieren
$field.removeClass('ajax')
// Benutzerdefinierten Erfolgsrückruf ausführen
if( userAjaxOps._success ) {
userAjaxOps._success( resp, text, xhr )
}
} ,
-
Fehler: Funktion (xhr, text, error) {
-
if (text! == 'abort') {
showOrHideError( self.error.fail, false )
$input.data( 'ideal-ajax-error', self.error.fail )
$field.removeClass('ajax')
// Benutzerdefinierten Fehlerrückruf ausführen
if ( userAjaxOps._error ) {
userAjaxOps. _error( xhr, text, error )
}
}
- }
- }
- $.extend( ajaxOps, userAjaxOps )
- // Init .
- $input.removeData('ideal-ajax-error')
- $input.removeData('ideal-ajax-resp')
- $field.addClass('ajax')
- // Anfrage ausführen und speichern, um sie abbrechen zu können
- # }
- }
- }
- Rückgabefilter
- }
- $
.idealforms.flags
= { - noerror: function (i) {
i.parent().siblings('.ideal-error').hide()
- },
- noicons: function (i) {
- i.siblings('.ideal-icon-valid, .ideal-icon-invalid').hide()
- },
- novalidicon: function (i) {
- i.siblings('.ideal -icon-valid').hide()
- },
- noinvalidicon: function (i) {
- i.siblings('.ideal-icon-invalid').hide()
- },
- noclass: Funktion (i) {
- i.parents('.ideal-field').removeClass('valid invalid')
- },
- novalidclass: function (i) {
- i.parents('.ideal-field').removeClass('valid')
- },
- noinvalidclass: function (i) {
- i.parents('. ideal-field').removeClass('invalid')
- }
- }
- /*
- * Ideales Formular-Plugin
- */
var _defaults = {
Eingaben: {},
customFilters: {},
customFlags: {},
globalFlags: '',
onSuccess : function(e) { alert('Thank you...') },
onFail: function() { alert('Invalid!') },
responsiveAt: 'auto',
disableCustom: ''
}
// Konstruktor
var IdealForms = Funktion( Element, Optionen ) {
-
var self = this
self.$form = $( element )
self.opts = $.extend( {}, _defaults, options )
self.$tabs = self.$form.find('section')
// Lokalisierte Filter festlegen
$. extension( $.idealforms.filters, getFilters() )
self._init()
}
// Plugin
$.fn.idealforms = Funktion( Optionen ) {
return this.each(function() {
if ( !$.data( this, 'idealforms' ) ) {
$.data( this, 'idealforms', new IdealForms( this, options ) )
}
})
}
// WENIGER Variablen abrufen
var LessVars = {
fieldWidth: Utils.getLessVar( 'ideal-field-width', 'width' )
}
/*
* Private Methoden
*/
$.extend ( IdealForms.prototype, {
_init: function() {
var self = this
var o = self.opts
var formElements = self._getFormElements()
self.$form.css( 'visibility', 'visible' )
.addClass('ideal-form')
.attr( 'novalidate', 'novalidate' ) // HTML5-Validierung deaktivieren
// Markieren
formElements.inputs
.add( formElements.headings )
.add( formElements.separators )
.each(function(){ self._doMarkup( $(this) ) })
// Registerkarten generieren
if ( self.$tabs.length ) {
var $tabContainer = $('<div class="ideal-wrap ideal-tabs ideal-full-width"/>')
self.$form.prepend( $tabContainer )
self.$tabs.idealTabs( $tabContainer )
}
// Datumsauswahl immer unter der Eingabe anzeigen
if ( jQuery.ui ) {
$.datepicker._checkOffset = function( a,b,c ) { return b }
}
- userInput
=
o .inputs[ this.name ] })
-
$(window).resize(function(){ self._responsive() }) - e.which
=== 13 && e.target.nodeName !== 'TEXTAREA' ) {
e.preventDefault()
}
-
if (! Self.isvalid ()) {-
e.preventDefault () -
o.onfail () -
}
})
self._adjust()
-
self._attachEvents()
self.fresh() / Neu starten
},
_getFormElements: function() {
return {
inputs: this.$form.find('input, select , textarea, :button'),
labels: this.$form.find('div > label:first-child '),
text: this.$form.find('input:not([type="checkbox"], [ type="radio"], [type="submit"]), textarea'),
select: this.$form.find('select'),
radiocheck: this.$form.find('input[type="radio"], input[type="checkbox"]'),
Schaltflächen: this.$form.find(':button'),
Datei: this.$form.find('input[type="Datei "]'),
Überschriften: this.$form.find('h1, h2, h3, h4, h5, h6'),
Trennzeichen: this.$form.find('hr'),
-
hidden: this.$form.find('input:hidden')
}
},
_getUserInputs: function() {
return this.$form.find('[name="'+ Utils.getKeys( this.opts.inputs ).join('"], [name="') +'"]')
},
_getTab: function( nameOrIdx ) {
var self = this
var isNumber = !isNaN( nameOrIdx )
if ( isNumber ) {
return self.$tabs.eq( nameOrIdx )
}
return self.$tabs.filter(function() {
var re = new RegExp( nameOrIdx, 'i' )
return re.test( nbsp;$(this).data('ideal- tabs-content-name') )
})
},
_getCurrentTabIdx: function() {
return this.$tabs.index( this.$form.find('.ideal-tabs-content:visible') )
},
_updateTabsCounter: function() {
var self = this
self.$tabs.each(function( i ) {
var invalid = self.getInvalidInTab( i ) .length
self.$tabs.updateCounter( i, invalid )
})
},
_adjust: function() {
var self = this
var o = self.opts
var formElements = self._getFormElements()
var curTab = self._getCurrentTabIdx()
// Autocomplete verursacht einige Probleme...
formElements.inputs.attr('autocomplete', 'off')
🎜> // Beschriftungen anpassen
-
var
labels = - formElements
.labels
Beschriftungen. removeAttr('style').width( Utils.getMaxWidth( labels) ) // Überschriften und Trennzeichen anpassen
if ( self. $tabs.length ) {
this.$tabs.each(function(){
$( this ).find('. ideal-heading:first').addClass('first-child')
})
} else {
self.$form.find('.ideal-heading:first').addClass('first-child')
}
self._setDatepicker()
// Berechnung, Tabs ausblenden abgeschlossen
if ( self.$tabs.length ) {
self.$tabs.hide()
self.switchTab( curTab )
}
},
_setDatepicker: function() {
-
var
o = - this
.opts
var $datepicker = this.$form.find( 'input.datepicker')
if ( jQuery.ui && $datepicker.length ) { $datepicker.each(function() {
var userInput = o.inputs[ this.name ]
var Daten = userInput && userInput.data && userInput.data.date
var Format = Daten ? data.replace( 'yyyy', 'yy' ) : 'mm/dd/yy'
$(this).datepicker({
dateFormat: format,
vorAnzeigen: Funktion( Eingabe) {
$( input ).addClass ('open')
},
onChangeMonthYear: function() {
-
// Hack zur Behebung von IE9 nicht die Größe
-
var $ this = $ (this)
-
-
🎜> var
w = $ this.outerwidth () // - cache
zuerst! 🎜>
$this.datepicker('widget').css( 'width', w ) -
var t = $(this), w =
t .outerWidth( )
-
var o =
this .opts -
var elementType =
Utils .getIdealType( $element ) -
// Validierungselemente
var $field = $('<span class="ideal -field"/>')
var $error = $('< span class="ideal-error" />')
var $valid = $('<i class="ideal-icon ideal-icon-valid" />')
var $invalid = $('<i class="ideal-icon ideal-icon-invalid"/>')
. click(function(){
$(this).parent().find('input:first, textarea, select').focus()
})
// Grundlegendes Markup
$element.closest('div').addClass('ideal- wrap')
.children('label:first-child').addClass('ideal-label')
var idealElements = {
_defaultInput: function() {
$element.wrapAll( $field ).after( $valid , $invalid )
.parent().after( $error )
},
-
- // Radios und Schecks mehr als einmal verpacken.
- var
isWrapped
= $element.parents('.ideal-field').length
-
if ( !isWrapped ) {
$element.parent() .nextAll().andSelf().wrapAll( $field.addClass('ideal-radiocheck') )
- $element.parents('.ideal-field').append( $valid, $invalid ).after( $error )
- }
- if ( !/radiocheck/.test( o.disableCustom ) ) {
- $element.idealRadioCheck()
- }
- },
- select: function() {
- idealElements._defaultInput()
if ( !/select/.test( o.disableCustom ) ) {
$element.idealSelect()
}
},
file: function() {
idealElements ._defaultInput()
if ( !/file/.test( o.disableCustom ) ) {
$element.idealFile()
}
},
Taste: function() {
if ( !/button/.test( o.disableCustom ) ) {
$element.addClass('ideal-button')
}
},
hidden: function() {
$element.closest('div').addClass('ideal-hidden')
},
heading: function() {
$element.closest('div').addClass('ideal-full-width')
$element.parent( ).children().wrapAll('<span class="ideal-heading"/>')
},
Trennzeichen: function() {
.closest('div').addClass('ideal-full-width')
$element.wrapAll('<div class="ideal-separator"/>')
}
}
// Markup für den aktuellen Elementtyp generieren idealElements[ elementType ]() : $.noop()
$error.add( $valid ).add( $invalid ).hide() // Neu starten
},
/** Validiert eine Eingabe und zeigt oder versteckt Fehler und Symbol
* @memberOf Actions
* @param {object} $input jQuery-Objekt
* @param {string} e Das JavaScript-Ereignis
*/
_validate: function( $input, e ) {
-
var
self = - this
var
o = - this
.opts
var userOptions = o.inputs[ $input.attr('name') ]
var userFilters = userOptions.filters && userOptions.filters.split(/s/)
var name = $input.attr(' name')
var value = $input.val()
var ajaxRequest = $.idealforms.ajaxRequests[ name ]
var isRadioCheck = $input.is('[type="checkbox "], [type="radio"]')
var inputData = {
-
// If is radio oder self.$form.find('[
name =- "' + name + '"
]') : $input, userOptions : userOptions
}
// Validierungselemente
-
var $
Feld = $input.parents('.ideal-field') -
var $
error = $field.siblings('.ideal-error') -
var $
ungültig = - isRadioCheck
? $input.parent().siblings('.ideal-icon-invalid')
: $input.siblings('.ideal-icon-invalid')
-
var $
gültig = - isRadioCheck
? $input.parent().siblings('.ideal-icon-valid')
: $input.siblings('.ideal-icon-valid')
function resetError() {
$field.removeClass('valid invalid').removeData('ideal-isvalid')
$error.add( $invalid ).add( $valid ).hide()
}
Funktion showOrHideError ( Fehler, gültig ) {
resetError()
gültig ? $valid.show() : $invalid.show()
$field.addClass( valid ? 'valid' : 'invalid' )
$field.data( 'ideal-isvalid', valid )
if ( !valid ) {
$error.html( Fehler ).toggle( $field.is('.ideal-field-focus') )
}
}
-
// Verhindern Sie die Validierung beim Eingeben, jedoch nicht neuer Zeichen
-
// Dies wird hauptsächlich dazu dient, mehrere AJAX -Anforderungen zu verhindern
var oldValue = $input.data('ideal-value') || 0
$input.data( 'ideal-value', value )
if ( e.type = == 'keyup' && value === oldValue ) { return false }
// Validieren
if ( userFilters ) {
$.each( userFilters, function( i, filter ) {
var theFilter = $.idealforms.filters[ filter ]
var customError = userOptions.errors && userOptions.errors[ filter ]
var Fehler = ''
// Wenn das Feld leer und nicht erforderlich ist
if ( !value && filter !== ‘required’ ) return false
}
if ( theFilter ) {
// Ajax abbrechen falls es vorhanden ist eine ausstehende Anfrage Anfrage. abort()
$field.removeClass('ajax')
}
/ / AJAX
- filter
=== 'ajax' ) {
nbsp; showOrHideError( error, false) // auf ungültig setzen, bis die Antwort zurückkommt
$error.hide()
-
if (
z.B .Type === 'KeyUp') {-
theFilter.regex (inputData, Wert, ShoworhideError) // Fährt den AJAX -Rückruf
- aus.
} else {
-
var
ajaxError = $input.data('ideal-ajax-error') -
if ( ajaxError ) {
-
showOrHideError( ajaxError, $input.data('ideal-ajax-resp') || fal se )
}
}
- }
- // Alle anderen Filter derFilter. regex ) && theFilter.regex.test( value ) ||
- >Fehler
=
customError || theFilter.error // Assign-Fehler nach dem Aufruf von „regex()“ { return false } }
}
- Flags
= (function(){
-
var
f = - userOptions
.flags && userOptions.flags.split(' ') || [ ]
if ( o.globalFlags ) {
$.each( o.globalFlags.split(' '), function( i, v ) { f.push(v) })
}
return f
if ( flags.length ) {
- theFlag
= $.idealforms.flags[f]
if ( theFlag ) { theFlag( $input, e .type ) }
})
}
-
// Aktualisierungszähler
if ( self.$tabs.length ) {
self._updateTabsCounter( self._getCurrentTabIdx() )
}
},
_attachEvents: function() {
var self = this
self._getUserInputs().on('keyup change focus blur', function(e) {
var $this = $(this)
var $field = $this.parents('.ideal-field')
var isFile = $this.is('input[type=file]')
// Trigger on change if Typ=Datei cuz benutzerdefinierte Datei
// deaktiviert den Fokus auf die Eingabe der ursprünglichen Datei (tabIndex = -1)
if ( e.type === 'focus' || isFile && e.type === 'change' ) {
$field.addClass('ideal-field-focus')
}
if ( e.type === 'blur' ) {
$field.removeClass('ideal-field-focus')
}
self._validate( $this, e )
})
-
},
_responsive: function() {
var formElements = this._getFormElements()
var maxWidth = LessVars.fieldWidth + formElements.labels.outerWidth()
var $emptyLabel = formElements.labels.filter(function() {
return $(this).html () === ' '
})
var $customSelect = dies .$form.find('.ideal-select')
this.opts.responsiveAt === 'auto'
? this.$form.toggleClass( 'stack', this.$form.width() < maxWidth )
: this. $form.toggleClass( 'stack', $(window).width() < this.opts.responsiveAt )
var isStack = this.$form.is('.stack')
$emptyLabel.toggle( !isStack )
$customSelect.trigger( isStack ? 'list' : 'menu' )
// DatePicker ausblenden
var $datePicker = this.$form.find('input.hasDatepicker')
if ( $datePicker.length ) { $datePicker.datepicker('hide') }
}
})
/*
* Öffentliche Methoden
*/
$.extend( IdealForms.prototype , {
getInvalid: function() {
return this.$form.find('.ideal-field').filter( function() {
return $(this).data('ideal-isvalid') === false
})
},
getInvalidInTab: function( nameOrIdx ) {
return this._getTab( nameOrIdx ) .find('.ideal-field').filter(function() {
-
return $(this).data('ideal-isvalid') === false
})
},
isValid: function() {
return !this.getInvalid().length
},
-
isValidField: function( field ) {
var $input = Utils.getByNameOrId( field )
return $input.parents(' .ideal-field').data('ideal-isvalid') === true
},
focusFirst: function() {
if ( this.$tabs.length ) {
-
this.$tabs.filter(':visible')
.find('.ideal-field:first')
.find('input:first, select, textarea').focus()
} else {
this.$form.find('.ideal-field:first')
.find('input:first, select, textarea').focus()
}
return this
},
focusFirstInvalid: function() {
var $first = this.getInvalid().first().find('input:first, select, textarea')
var tabName = $first.parents('.ideal-tabs-content').data('ideal-tabs-content-name')
if ( this.$tabs.length ) {
this.switchTab( tabName )
}
$first.focus()
dieses zurückgeben
},
switchTab: function( nameOrIdx ) {
this.$tabs.switchTab( nameOrIdx )
return this
},
nextTab: function() {
this.$tabs. nextTab()
return this
},
prevTab: function() {
this.$tabs.prevTab()
return this
-
},
firstTab: function() {
this.$tabs.firstTab()
return this
},
lastTab: function() {
this.$tabs.lastTab( )
return this
},
-
fresh: function() {
this._getUserInputs().change().parents('.ideal-field')
.removeClass('valid invalid')
dieses zurückgeben
},
freshFields: function( fields ) {
fields = Utils.convertToArray( fields )
$.each( fields, function( i ) {
var $input = Utils.getByNameOrId( fields[ i ] )
$ input.change().parents('.ideal-field').removeClass('valid invalid')
})
return this
},
reload: function() {
this._adjust()
this._attachEvents()
return this
},
reset: function() {
var formElements = this._getFormElements()
formElements.text.val('') // Texteingaben
-
formElements.radiocheck.removeAttr('checked') // radio & check
// Auswählen und benutzerdefinierte Auswahl
formElements.select.find('option').first().prop( 'selected', true )
this.$form.find('.ideal-select').trigger('reset')
if ( this.$ tabs.length ) { this.firstTab() }
this.focusFirst().fresh()
return this
},
resetFields: function( fields ) {
fields = Utils.convertToArray( fields )
var formElements = this._getFormElements()
$.each( fields, function( i, v ) {
var $ input = Utils.getByNameOrId( v )
var type = Utils.getIdealType ( $input )
if ( type === 'text' || type === 'file' ) {
$input.val('')
}
if ( Typ === 'radiocheck' ) {
$input.removeAttr('checked') // radio & check
}
if ( type === 'select' ) {
$input.find('option'). first().prop( 'selected', true )
$input.next('.ideal-select').trigger('reset')
}
$input.change()
})
this.freshFields( Felder )
return this
},
toggleFields: function( Felder ) {
Felder = Utils.convertToArray( Felder )
var self = this
-
var $fields = Utils.getFieldsFromArray( fields )
$fields.each(function() {
var $this = $(this)
var name = $this.attr('name') || $this.attr('id')
var input = self.opts.inputs[ name ]
var filters = input && input.filters
var dataFilters = $this. data('ideal-filters') || ''
$this.data( 'ideal-filters', filters )
$this.closest('.ideal-wrap' ).toggle()
self.setFieldOptions( name, { filters: dataFilters } )
})
dieses zurückgeben
},
setOptions: function( options ) {
$.extend( true, this.opts, options )
this.reload().fresh()
$.extend( true, this.opts.inputs[ name ], options )
this.reload().freshFields([ name ])
-
dieses zurückgeben
},
addFields: function( fields ) {
-
fields = - Utils
.convertToArray( fields )
-
var
self = - this
// Speichern Sie die Namen aller Eingaben im Array
-
// um Methoden zu verwenden, die Namen annehmen, z. fresh() var
allNames = [] -
var
name = - ops
.name
-
nbsp; var
userOptions = { filters: ops.filters || '',
Fehler: ops.errors || {},
flags: ops.flags || ''
}
-
var
label = - ops
.label || ''
-
var
type = - ops
.type var
list = - ops
.list || [] var
placeholder = - ops
.placeholder || '' var
value = - ops
.value || '' var $
field = $('- <
div> '+
'<label>'+ label +':
label- >
'+ Utils.makeInput( name, value, type, list, placeholder ) +
'div>')
var $ input = $field.find('input, select, textarea, :button')
// Eingaben mit Filtern zur Liste hinzufügen
// von zu validierenden Benutzereingaben
if ( userOptions.filters ) { self.opts.inputs[ name ] = userOptions }
-
self._domarkup ($ input)
-
// In DOM
-
if (ops.addafter) {
- einfügen {
- $field.insertAfter(
- $( Utils.getByNameOrId( ops.addAfter ) ).parents('.ideal-wrap')
- )
- } else if ( ops.addBefore ) {
- $field.insertBefor e(
- $(Utils.getByNameOrId( ops.addBefore ))
- .parents('.ideal-wrap')
- )
- } else if ( ops.appendToTab ) {
- $field.insertAfter(
- self._getTab( ops.appendToTab ).find('.ideal-wrap:last-child')
- )
- } else {
- $field.insertAfter( self.$form.find('.ideal-wrap').last() )
- }
- // Der aktuelle Feldname in die Liste der Namen
- Allnames.push (Name)
hinzufügen
- }
- // Jede Eingabe durchlaufen
- $.each( fields, function( i, ops ) { add( ops ) })
- self.reload()
- self.freshFields( allNames )
- self._responsive()
- return this
- },
- removeFields: function( fields ) {
fields
= Utils- .convertToArray( fields )
var $fields
= Utils- .getFieldsFromArray( fields )
- $fields.parents('.ideal-wrap').remove ()
- this.reload()
- return this
- } })
}( jQuery, Fenster, Dokument ))
