Validate (jQuery Plugin): Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
 
(7 dazwischenliegende Versionen von 3 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
 +
War früher mal das Tool der Wahl. Wenn du noch jQuery einsetzt würde ich heute eher zu einem anderen greifen. Z.B. das von jqueryvalidation.org
 +
 +
Siehe auch
 +
https://jqueryvalidation.org/documentation/ - gutes Plugin, gutes Tutorial in youTube
 +
[[jQuery - ValidationEngine]]
 +
 
== Links ==
 
== Links ==
−
[[http://docs.jquery.com/Plugins/Validation/validate#options]]
 
  
−
[[http://blogs.fau.de/webworking/2011/05/13/tutorial-zur-eingabevalidierung-von-formularen-mit-hilfe-von-jquery/]] (Zugriff: 2012-05)
+
[[Media:jquery-validate-js.zip]]
−
== Validate Snippets ==
+
 
 +
http://docs.jquery.com/Plugins/Validation
 +
 
 +
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
 +
 
 +
http://blogs.fau.de/webworking/2011/05/13/tutorial-zur-eingabevalidierung-von-formularen-mit-hilfe-von-jquery/ (Zugriff: 2012-05)
 +
 
 +
== Anleitung ==
 +
 
 +
=== Standard Validierung ===
 +
Standardmäßig wird einfach in der Initialisierung das Formular mitgegeben (jQuery Standards)
 +
<pre>
 +
<script type="text/javascript" src="jquery-latest.js"></script>
 +
<script type="text/javascript" src="jquery.validate.js"></script>
 +
<script type="text/javascript">
 +
$(document).ready(function(){
 +
    $("#Formular").validate();
 +
});
 +
</script>
 +
</pre>
 +
 
 +
In den Formularen werden einfach Klassen mitgegeben. Anhand dieser validiert das Tool:
 +
<pre>
 +
<input class="required" type="text" value="" name="tx_gbtelecash_pi1[firstname]">
 +
</pre>
 +
==== Standard Klassen zur Validierung ====
 +
Die wichtigsten sind:
 +
<pre>
 +
class=”required”: Feld muss gesetzt sein
 +
class=”url”: Feld muss eine gültige URL enthalten
 +
class=”email”: Feld muss eine gültige E-Mail enthalten
 +
class=”required email”: Feld muss gesetzt und eine gültige E-Mail enthalten
 +
</pre>
 +
=== Weitere Validierungsmöglichkeiten über die validate() Funktion ===
 +
Neben diese Klassen gibt es weitere Möglichkeiten zur Überprüfung. Die wichtigsten hierbei sind:
 +
 
 +
minlength=”int” (Bsp.: minlength=”3″)
 +
maxlength=”int” (Bsp.: maxlength=”7″)
 +
min=”int” (Bsp.: min=”3″)
 +
max=”int” (Bsp.: max=”7″)
 +
equalTo=”id” (Bsp.: equalTo=”#passwort”)
 +
range=”int1int2″ (Bsp.: Zahlen zwischen 3 und 7: range=”37″)
 +
 
 +
Beispiel:
 +
<pre>
 +
validate({
 +
    rules: {
 +
          vorname: "required",
 +
          nachname: "required",
 +
          passwort: {
 +
              required: true,
 +
              minlength: 6
 +
          },
 +
          passwort2: {
 +
              required: true,
 +
              equalTo: "#passwort",
 +
              minlength: 6
 +
          },
 +
          email: {
 +
              required: true,
 +
              email: true
 +
          }
 +
    }
 +
})
 +
</pre>
 +
=== Eigene Validierungsmeldungen definieren ===
 +
<pre>
 +
validate({
 +
    messages: {
 +
          vorname: "Bitte Vornamen angeben!",
 +
          nachname: "Bitte Nachnamen angeben!",
 +
          passwort: {
 +
              required: "Bitte Passwort angeben!",
 +
              minlength: jQuery.format("mindestens {0} Zeichen eingeben!")
 +
          },
 +
          passwort2: {
 +
              required: "Bitte Passwort wiederholen!",
 +
              equalTo: "Passwort wiederholen",
 +
              minlength: jQuery.format("mindestens {0} Zeichen eingeben")
 +
          },
 +
          email: {
 +
              required: "Bitte E-Mail-Adresse eingeben!",
 +
              email: "E-Mail im Format name@domain.de eingeben!"
 +
          }
 +
    }
 +
})
 +
</pre>
 +
=== Validierung debuggen ===
 +
Das Plugin hilft über den Parameter debug beim validieren:
 +
validate({ debug: true })
 +
Aktiviert den Debug-Modus. Das Formular wird nicht abgeschickt und vorhandene Fehler werden in der Fehlerkonsole angezeigt (benötigt Firebug oder Firebug Lite)
 +
 
 +
=== Eigene Funktionen ausführen ===
 +
validate({ submitHandler: function(){###} })
 +
Sollte das Formular valide sein, wird der durch ### symbolisierte Quellcode ausgeführt. Ersetzt dabei das Standardverhalten beim Absenden des Formulars.
  
 
== Komplettes Beispiel ==
 
== Komplettes Beispiel ==

Aktuelle Version vom 4. März 2021, 19:31 Uhr

War früher mal das Tool der Wahl. Wenn du noch jQuery einsetzt würde ich heute eher zu einem anderen greifen. Z.B. das von jqueryvalidation.org

Siehe auch 

https://jqueryvalidation.org/documentation/ - gutes Plugin, gutes Tutorial in youTube
jQuery - ValidationEngine

Links[Bearbeiten]

Media:jquery-validate-js.zip

http://docs.jquery.com/Plugins/Validation

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

http://blogs.fau.de/webworking/2011/05/13/tutorial-zur-eingabevalidierung-von-formularen-mit-hilfe-von-jquery/ (Zugriff: 2012-05)

Anleitung[Bearbeiten]

Standard Validierung[Bearbeiten]

Standardmäßig wird einfach in der Initialisierung das Formular mitgegeben (jQuery Standards) 

<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function(){
     $("#Formular").validate();
});
</script>

In den Formularen werden einfach Klassen mitgegeben. Anhand dieser validiert das Tool: 

<input class="required" type="text" value="" name="tx_gbtelecash_pi1[firstname]">

Standard Klassen zur Validierung[Bearbeiten]

Die wichtigsten sind: 

 class=”required”: Feld muss gesetzt sein
 class=”url”: Feld muss eine gültige URL enthalten
 class=”email”: Feld muss eine gültige E-Mail enthalten
 class=”required email”: Feld muss gesetzt und eine gültige E-Mail enthalten

Weitere Validierungsmöglichkeiten über die validate() Funktion[Bearbeiten]

Neben diese Klassen gibt es weitere Möglichkeiten zur Überprüfung. Die wichtigsten hierbei sind: 

minlength=”int” (Bsp.: minlength=”3″)
maxlength=”int” (Bsp.: maxlength=”7″) 
min=”int” (Bsp.: min=”3″)
max=”int” (Bsp.: max=”7″)
equalTo=”id” (Bsp.: equalTo=”#passwort”)
range=”int1int2″ (Bsp.: Zahlen zwischen 3 und 7: range=”37″)

Beispiel: 

validate({
     rules: {
          vorname: "required",
          nachname: "required",
          passwort: {
               required: true,
               minlength: 6
          },
          passwort2: {
               required: true,
               equalTo: "#passwort",
               minlength: 6
          },
          email: {
               required: true,
               email: true
          }
     }
})

Eigene Validierungsmeldungen definieren[Bearbeiten]

validate({
     messages: {
          vorname: "Bitte Vornamen angeben!",
          nachname: "Bitte Nachnamen angeben!",
          passwort: {
               required: "Bitte Passwort angeben!",
               minlength: jQuery.format("mindestens {0} Zeichen eingeben!")
          },
          passwort2: {
               required: "Bitte Passwort wiederholen!",
               equalTo: "Passwort wiederholen",
               minlength: jQuery.format("mindestens {0} Zeichen eingeben")
          },
          email: {
               required: "Bitte E-Mail-Adresse eingeben!",
               email: "E-Mail im Format name@domain.de eingeben!"
          }
     }
})

Validierung debuggen[Bearbeiten]

Das Plugin hilft über den Parameter debug beim validieren: 

validate({ debug: true })

Aktiviert den Debug-Modus. Das Formular wird nicht abgeschickt und vorhandene Fehler werden in der Fehlerkonsole angezeigt (benötigt Firebug oder Firebug Lite)

Eigene Funktionen ausführen[Bearbeiten]

validate({ submitHandler: function(){###} })

Sollte das Formular valide sein, wird der durch ### symbolisierte Quellcode ausgeführt. Ersetzt dabei das Standardverhalten beim Absenden des Formulars.

Komplettes Beispiel[Bearbeiten]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Eingabevalidierung von Formularen mit Hilfe von jQuery</title>

<style type="text/css">
	* { font-family: Verdana; font-size: 10pt; }
	label { width: 10em; float: left; }
	label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
	p { clear: both; }
	.submit { margin-left: 12em; }
	em { font-weight: bold; padding-right: 1em; vertical-align: top; }
	form { width: 40em; }
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://view.jquery.com/trunk/plugins/validate/jquery.validate.js"></script>

<script type="text/javascript">
	$(document).ready(function(){
		$("#Formular").validate({
			rules: {
				vorname: "required",
				nachname: "required",
				passwort: {
					required: true,
					minlength: 6,
					maxlength: 10			
				},
				passwort2: {
					required: true,
					equalTo: "#passwort",
					minlength: 6,
					maxlength: 10
				},
				email: {
					required: true,
					email: true				
				}
			},
			messages: {
				vorname: "Bitte Vornamen angeben!",
				nachname: "Bitte Nachnamen angeben!",
				passwort: {
					required: "Bitte Passwort angeben!",
					minlength: jQuery.format("mindestens {0} Zeichen eingeben!"),
					maxlength: jQuery.format("maximal {0} Zeichen eingeben!")
				},
				passwort2: {
					required: "Bitte Passwort wiederholen!",
					equalTo: "Passwort wiederholen",
					minlength: jQuery.format("mindestens {0} Zeichen eingeben"),
					maxlength: jQuery.format("maximal {0} Zeichen eingeben!")
				},
				email: {
					required: "Bitte E-Mail-Adresse eingeben!",
					email: "E-Mail im Format name@domain.de eingeben!"	
				}
			},
			submitHandler: function() {
				alert("submitted!")	
			}
		});
	});
</script>
</head>

<body>
<form id="Formular" method="post" action="validate.php">
	<fieldset>
	<legend>Ein einfaches Formular</legend>
		<p>
			<label for="vorname">Vorname<em>*</em></label>
			<input type="text" id="vorname" name="vorname" size="15"/>
		</p>
		<p>
			<label for="nachname">Nachname<em>*</em></label>
			<input type="text" id="nachname" name="nachname" size="15"/>
		</p>
		<p>
			<label for="passwort">Passwort<em>*</em></label>
			<input type="password" id="passwort" name="passwort" size="15"/>
		</p>
		<p>
			<label for="passwort2">Passwort erneut<em>*</em></label>
			<input type="password" id="passwort2" name="passwort2" size="15"/>
		</p>
		<p>
			<label for="email">E-Mail<em>*</em></label>
			<input type="text" id="email" name="email" size="15"/>
		</p>
		<p>
			<input class="submit" type="submit" value="abschicken"/>
		</p>
	</fieldset>
</form>
</body>
</html>
Abgerufen von „https://wiki.stephanschlegel.de/index.php?title=Validate_(jQuery_Plugin)&oldid=25287“