Code Example

Wiederverwendbare Codes

Know-how

Parsley

Automatische Formular-Validierung mit Hilfe von Parsley.js.

Formular Validierung ist eine lästige Angelegenheit. Das leistungsstarke JavaScript-Plugin Parsley, hilft dabei dies zu einem Kinderspiel zu machen. Im Grundsatz kann die Formularüberprüfung durchgeführt und komplett angepasst werden, ohne eine einzige Zeile JavaScript zu schreiben.

Zudem wird Parsley aktiv bei github weiterentwickelt und bietet darüber hinaus Sprachdateien für etwas über 30 Sprachen.


Implementierung

Einbinden

Als erstes benötigt Parsley jQuery (>= 1.8). Im zweiten Schritt muss man sich Parsley herunterladen, in seine Verzeichnisstruktur einbauen und auf der Seite einbinden: <script src="parsley.min.js" defer> </script>

Tipp

Mittels Defer wird ein Script nicht ausgeführt bzw. geladen, bis die Seite vollständig zu ende geladen ist.

Problem Beispiel:

Wird ein jQuery geladen und danach das Parsley eingebunden, hängt das Parsley wie gewünscht natürlich an das jQuery. Wird nun zu einem späteren Zeitpunkt aus anderen Gründe nochmal ein jQuery eingebunden, überschreibt dies das vorhanden jQuery an welches sich Parsley gehangen hat und Parsley ist somit als Funktion nicht mehr erreichbar

Formular Implementierung

Parsley kann auf verschiedene Arten in Formulare Implementiert werden. Zwei grundsätzliche Arten sind, das Implementieren im Form-Tag oder das Implementieren im Script bereich.

Headbereich des Forms

<script src="jquery.js"></script>
<script src="parsley.min.js"></script>

<form id="myForm" data-parsley-validate>
    ...
</form>

Footer/Scrpft bereich des Forms

<script src="parsley.min.js"></script>

<form id="myForm">
    ...
</form>

<script type="text/javascript">
    $('#myForm').parsley();
</script>

Footer/Scrpft bereich des Forms

<script src="jquery.js"></script>
<script src="parsley.min.js"></script>

<form id="myForm">
    ...
</form> 

<script type="text/javascript">
  $('#myForm').parsley();
</script>

Tipp

Im Footer/Script Bereich zu Implementieren ist das bessere Vorgehen. Denn dabei kann mittels der ID bestimmt werden, welches Formular Validiert werden soll. Wird Parsley im Head/Form Bereich Implementiert, validiert Parsley alle Felder und Formulare auf der Seite.

Validieren

Validatoren am Inputfeld Definieren

Alle Validatoren werden mit "data-parsley-" Definiert. Parsley ist auch HTML 5 konform. Das heist, Parsley kann auch HTML5 required, lenght oder Pattern Validiern ohne "data-parsley-".

Beispiel 1

<input 	
    type="text" 
    name="Vorname" 
    id="InputFieldId" 
    placeholder="Mustermann" 
    class="form-name1" 
    value="" 
    autocomplete="off" 
    data-parsley-trigger="keyup" 
    required="required" 
    data-parsley-required-message="Dies ist ein Pflichtfeld" 
    data-parsley-errors-container="#inputFieldId-errors" 
    data-parsley-pattern="^[a-zA-z\s\-\.\üÜäÄöÖß]*$" 
    data-parsley-pattern-message="Nicht erlaubte Zeichen"
>

<div id="inputFieldId-errors-errors"></div>
data-parsley-trigger="keyup" = Beim Reinspringen als auch bei Veränderungen wird das Feld auf Validität geprüft.
required="required" = Pflichtfeld. Man kann auch data-parsley-required schreiben, aber durch die HTML5 Kompatibilität ist dies nicht nötig.
data-parsley-pattern = Es wird ein Pattern/Regex für das Feld bestimmt. Notation bei Parslye = "^[ ... Pattern ... ]*$".
data-parsley-required-message = Es wird für riquired eine Error-Nachricht bestimmt.
data-parsley-pattern-message = Es wird für Pattern eine Error-Nachricht bestimmt.
data-parsley-errors-container = Es wird der Bereich bestimmt wo alle Error-Nachrichten dieses Feldes erscheinen sollen.
<div id="inputFieldId-errors-errors"></div> = Error Nachrichten-Bereich

Beispiel 2

<div class="form-checkbox-container"><input 	
		type="checkbox" 
		class="checkbox_checkPicker" 
		name="test" 
		id="checkbox_0-1" 
		value="test1" 
		required="required" 
		data-parsley-required-message="Sie müssen mindestens 1 Optionen auswählen" 
		data-parsley-mincheck-message="Sie müssen mindestens 1 Optionen auswählen" 
		data-parsley-mincheck="1" 
		data-parsley-errors-container="#checkbox_0-checkbox-errors" 
		data-parsley-multiple="test"
	>			
	<span class="textCheckbox">test1</span>

	<input 	
		type="checkbox" 
		class="checkbox_checkPicker" 
		name="test" 
		id="checkbox_0-2" 
		value="test2" 
		required="required" 
		data-parsley-required-message="Sie müssen mindestens 1 Optionen auswählen" 
		data-parsley-mincheck-message="Sie müssen mindestens 1 Optionen auswählen" 
		data-parsley-mincheck="1" 
		data-parsley-errors-container="#checkbox_0-checkbox-errors" 
		data-parsley-multiple="test"
	>				
	<span class="textCheckbox">test2</span>

	<div class="checkbox-error" id="checkbox_0-checkbox-errors"></div>
</div>

Eigene Funktionen

Im nachfolgenden Beispiel werden Bereiche aus der Validierung herausgenommen z.B. um einen Bereich der nicht eingeblendet ist, nicht zu Validieren.

$("#divBereichsContainer").parsley({
    excluded: 'input[type=button], input[type=submit], 
    input[type=reset], input[type=hidden], :disabled'
});