kostenloser Webspace werbefrei: lima-city

Formular-Eingabe live prüfen (mit JS)

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   netwin

   netwin hat kostenlosen Webspace.

   18:24, 26.6.2014

   Hallo
   
   ich möchte bei eine Formular die Eingabe durch User / Besucher
   direkt schon während der Eingabe live prüfen (Filter anwenden)
   
   je nach FelderTyp der Eingabe eine andere Pfüfung / Filter
   dafür kommen u.a. folgende Typen in Frage:
   
   + text (ohne Sonderzeichen)
   + int (Ganz-Zahl)
   + float (Komma-Zahl)
   + mail (valide eMaill)
   + url (valide URL)
   + date (Datums-Format)
   + ...
   
   
   also eine JS-Funktion um verschiedene Daten-Typen zu Prüfen und ggf. zu Filtern
   
   z.B. als JS Funktion form_check()
   
   

   function form_check (typ) { 
   	
   	if (typ == 'text') { 
   	  // --- hier Check ... Text ohne Sonderzeichen 
   	}
   	
   	if (typ == 'int') { 
   	  // --- hier Check ... Ganz-Zahl (int)  
   	}
   	
   	if (typ == 'mail') { 
   	  // --- hier Check ... Valide eMail Syntax  
   	}
   	
   	if (typ == 'url') { 
   	  // --- hier Check ... Valide URL Syntax  
   	}
   	
   	// ------ usw. ------ 
   
   }

   
   
   HTML:
   

   <form .... >
     <input type="text" name="new_titel" value="" onkeyup="form_check('text');" /> 
     <input type="text" name="new_age" value="" onkeyup="form_check('int');" /> 
     <input type="text" name="new_mail" value="" onkeyup="form_check('mail');" /> 
     <input type="text" name="new_link" value="" onkeyup="form_check('url');" /> 
     ... 
   </form>

   
   
   etwas zum Einbau (als JavaScript Bibliothek / Funktions-Sammlung)
   was man bei einzelnen Formular Eingabe-Feldern als "event" anwenden kann
   
   aber ... ich will das Rad nicht neu erfinden (!!!) für diese Aufgabe gibt es doch
   sicher schon eine solche "fertige" JS-Bibliothek / Funktions-Sammlung
   
   ... kann mir jemand was dafür empfehlen (auch evtl. als jQuery-Plugin) ?!?
   
   oder .... wenn Nichts derartiges bekannt,
   dann lasst uns hier eine (neue) Funktion dafür entwickeln und ausbauen,
   einen Anfang habe ich ja schonmal gemacht mit form_check (typ) ... als Idee
   
   
   
   
   Beitrag zuletzt geändert: 26.6.2014 18:25:05 von netwin

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. s*****d

   14:48, 27.6.2014

   Hallo!
   Ich habe ein wenig gegoogled, da ich dieses Problem auch einmal hatte.
   Dieser Link war sehr nützlich für mich:
   http://matthiasschuetz.com/livevalidation-erweiterte-validierung-mit-javascript
   
   MfG. Simon D.

4. pako-webdesign

   pako-webdesign hat kostenlosen Webspace.

   23:12, 27.6.2014

   Ok, hier mal meine Version eines solchen Skripts:
   Zuerst einmal, wie du schon vorweg geschrieben hast, die Funktion in der die Filter geschrieben werden:
   Man könnte eine return false und true Sperre einführen, was ich bei dieser Version auf machen werde. Es wäre allerdings trotzdem noch zu empfehlen den Filter noch extra in PHP einzubauen, da die Javascript Sperre von jedem möchtegern Internet-Gangster mit den Entwickler Tools jedes gängigen Browsers umgangen werden kann. Hier wird mit einer If und else if-Klausel einmal alles abgefragt:
   

   function check_form(typ)
   {
   if(typ == "url")
   {
   if(alles ok == "ja")
   {
   return true;
   }
   else
   {
   return false;
   //Fehler Meldungen etc.
   }
   }
   else if(typ == "blabla")
   {
   if(alles ok == "ja")...
   }
   ...
   }

   
   So wird, wenn die Prüfung (alles ok) alle deine Kriterien erfüllt, das Absenden des Formulars freigegeben (ausser ein Gangster deaktiviert dein Skript, dann muss die PHP Datei übernehmen). Jetzt gibt es zwei Möglichkeiten wie du die Prüfung ausführen könntest: Entweder wenn das Formular abgesendet werden soll oder wenn eine Taste gedrückt wird:
   Wenn das Formular abgesendet wird:
   

   $('#formular_id').submit(check_form());

   
   Wenn eine Taste gedrückt wird (Mehr Rechenleistung wird benötigt):
   

   onkeydown=check_form(typ);

   
   So würde meine Version des Skripts circa aussehen, vielleicht noch ein bisschen übersichtlicher gestalten. Aber wie schon zweimal gesagt: Das ist eigentlich nur "Make-Up" für dein Formular, denn der Nutzer wird zwar aufgehalten das Formular abzusenden, aber nur so lange wie auch dein Skript arbeitet.
   Ich hoffe ich konnte dir damit ein bisschen helfen.

5. nemoinho

   

   nemoinho hat kostenlosen Webspace.

   14:59, 28.6.2014

   Hi,
   
   eigentlich ist das alles nichts kompliziertes, idealerweise ist das Script dabei natürlich einfach zu erweitern und ebenfalls einfach zu verwenden.
   Ich würde darum vorschlagen, dass man einfach nur ein Script einbindet und dann an jedem Input-Element, welches validiert werden soll ein neues Attribut hinzufügt, um anzugeben, dass das Element validiert werden soll.
   Das HTML sähe dann z.B. so aus:

   <input name="url" validate="url" />
   <input name="date" validate="date" />
   <input name="age" type="number" validate="int" />
   <input name="mail" type="email" validate="email" />
   <script type="text/javascript" src="formvalidator.js"></script>

   
   Das entsprechende JS sähe so aus:

   FormValidator = (function(){
     "use strict";
     var callback, dateFormat;
     var checks = {
       'date': function(src){
         return dateFormat.test(src.value);
       },
       'int': function(src){
         return src.value % 1 === 0 && !/\./.test(src.value);
       },
       'url': function(src){
         // hier check einfügen
       }
       /*
        * nach diesem Schema weitere Checks hinzufügen
        * jeder Check der in dieser Liste steht kann sofort im
        * HTML-Attribute validate verwendet werden!
        */
     };
     var runChecks = function(e){
       e = e || event;
       var src = e.target || e.srcElement;
       var validation = src.getAttribute('validate').toLowerCase();
       var ret = true;
       if(checks[validation]){
         ret = checks[validation](src);
       } else {
         console.log("The function checks." + validation + "() doesn't exists");
       }
       callback(src, ret);
     };
     return function(localCallback, localDateFormat){
       callback = localCallback || function(){};
       dateFormat = localDateFormat || /\d\d\.\d\d\.\d{4}/;
       var inputElements = document.querySelectorAll('input[validate]');
       for(var i = inputElements.length, tmp; i--; ){
         tmp = inputElements[i];
         tmp.onkeydown = tmp.onkeyup = runChecks;
       }
     }
   })()
   FormValidator();

   Ich habe den Code jetzt nicht getestet, sondern nur hier im Forum geschrieben, aber grundsätzlich sollte der so funktionieren.
   Alle Checks die in dem Object checks hinterlegt sind können sofort im HTML genutzt werden.
   Wenn du z.B. die Felder rot färben willst, die Falsch sind, kannst du das über einen callback lösen. Dazu ruft du nicht

   FormValidator()

   am Ende der Datei auf, sondern z.B. folgendes:

   FormValidator(function(element, result){
     element.style.background = result ? '' : 'red';
   })

   
   
   Insgesamt ist das doch recht einfach oder?
   
   FormValidator hat dazu noch einen zweiten Parameter, der das Datumsformat als Regex erwartet, ansonsten wird das Format "xx.xx.xxxx" erwartet.
   Außerdem wird in der Konsole mitgeloggt, wenn das Attribut validate einen falschen Wert enthält.
   
   Mit freundlichen Grüßen

6. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?