Form Validator Plugin Für Jquery

Programmierung, ,

Form Validator Plugin Für Jquery

Ich stand wieder einmal vor dem Problem Formulareingaben vor der Verarbeitung durch ein PHP Script prüfen zu lassen.
Also habe ich mir kurz Gedanken gemacht wie ich diese Problem lösen kann.

Einige Zeit später und Hilfe von Jquery und Bootstrap habe ich eine allround Lösung Programmiert. jfv Es wird nur Jquery in der aktuellen Version und deine Bootstrap css Datei benötigt.

sehen wir und doch einmal ein normales HTML Formular an.

<form method=“post“ action=“index.php“>
<input tzype=“text“ value=““ name=“tb_Name“>
<input type=“submit“ value=“abschicken“ />
</form>

sobald man auf den Abschicken Butten klickt wird das Formular versendet.
Nun gibt es das Problem das auch wenn das Inputfeld tb_Name leer ist das Formular dennoch versendet wird.

Mein kleines Jquery Plugin bringt Abhilfe.
fügen Sie in die zu prüfenden input Felder folgende Attribute.

jfvType=“string“ // diese Attribut gibt den Type des Feldes an mögliche Type sind string, number, mail
jfvLength=“4″ // diese Attribut ist nur gültig wenn das Input Feld vom Type string ist, es gibt an das der Inhalt eine Mindestlänge 4 Zeichen haben muss.
jfvError=“Fehlermeldung“ // wenn das Formularfeld nicht richtig ausgefüllt worden ist wird diese Meldung als Fehlerausgabe angezeigt

Beispiel

<link rel="stylesheet" type="text/css" href="css/jfv.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.complete.css">
<script type="text/javascript" src="js/jquery-1.9.0.js"></script>
<script type="text/javascript" src="js/jFormValid.js"></script>
<script type="text/javascript" >
$(function()
{
// Handler for .ready() called.
$("#UserForm").jFormValid(
{
ErrorClass: "MyError"
});
});
</script>
<!-- head ende -->

<form method="post" action="index.php" id="UserForm">
<input tzype="text" value="" name="tb_Name" jfvType="string" jfvLength="4" jfvError="bitte geben Sie einen Namen an!">
<input type="submit" value="abschicken" />
</form>

 

Beispiel Formular mit Verwendung von Bootstrap css Framework.

<form id="UserForm" method="post" action="./">
<div>
<label for="tb_Name">Loginname</label>
<div>
<input type="text" value="" jfvType="string" jfvLength="4" jfvError="Bitte geben Sie einen Loginnamen an welcher länger oder gleich 4 zeichen lang ist." name="tb_LoginName" id="LoginName" placeholder="MH2013" >
</div>
</div>
<div>
<label for="tb_Street">Benutzername</label>
<div>
<input type="text" value="" jfvType="string" jfvLength="4" jfvError="Bitte geben Sie einen Benutzername an welcher länger oder gleich 4 zeichen lang ist." name="tb_UserName" id="UserName" placeholder="Matthias Herzog" >
</div>
</div>
<div>
<label for="tb_Zip">Passwort</label>
<div>
<input type="text" value="" jfvType="string" jfvLength="4" jfvError="Bitte geben Sie ein Passwort an welches länger oder gleich 4 zeichen lang ist." name="tb_UserPass" id="UserPass" placeholder="QwErTz" >
</div>
</div>
<div>
<label for="tb_Town">Email</label>
<div>
<input type="text" value="" jfvType="mail" jfvError="Bitte geben Sie eine EmailAdresse an." name="tb_Email" id="tb_Email" placeholder="matthias.herzog@gmx.net" >
</div>
</div>

<div>
<button type="submit">Edits</button>
</div>
</div>
</form>

 

Lizenz MIT Lizenz