kostenloser Webspace werbefrei: lima-city


Formular-Eingabe live prüfen (mit JS)

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    netwin

    netwin hat kostenlosen Webspace.

    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. 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.

    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. 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?

Über lima-city

Login zum Webhosting ohne Werbung!