Combobox mit jquery und Formvalidator

  • Hallo zusammen,

    ich komme Ursprünglich nicht aus dem Webbereich muss mich jetzt aber für ein kleines Projekt doch etwas damit befassen. Über eine Website sollen diverse Parameter eines Systems gesteuert werden. Jetzt sitze ich schon eine ganze weile an einem Problem und komme einfach nicht weiter, vermutlich mangels Erfahrung.


    Es geht um folgendes:

    Ich habe eine Steuerseite mit diversen Input-Feldern. Diese werden mittels dem jquery-Formvalidator (formvalidator.net) auf korrekte Eingaben geprüft. Das passiert schon während der Eingabe (Blur-Erreignis). Funktioniert auch wunderbar.


    Jetzt habe ich aber noch etwas hässliches, eine Kombobox. Es muss möglich sein aus einer (sehr langen) Liste von Werten welche auszuwählen und weiterhin neue eingeben zu können. Mit einer kleinen Modifikation macht das die Autocomplete funktion wunderbar (https://jqueryui.com/autocomplete/#combobox). Ich benötige jedoch auch hier eine Validation, was auch eigentlich kein Problem ist (da Autocomplete mit einem Input arbeitet). Ein <select> mit der normalen Liste wird versteckt, anstelle dessen wird ein Input mit einem Button daneben erzeugt. Ich habe das Input um den String für die Validation ergänzt.


    Leider funktioniert das ganze nicht so wie gewünscht. Es sieht so aus, als ob die .find-Methode das neue durch Javascript erzeugt <Input> nicht im <Form> findet. Das Blur-Erreignis wird nicht gesetzt. Aber: nachdem ich auf Submit klicke wird ein Eingabefehler in der Kombobox erkannt. Bei den weiteren Eingaben funktioniert dann auch Blur.


    Ich habe das Problem auf ein Minimum herunter gebrochen und hänge es meinem Beitrag an.

    jquery und jquery-ui lade ich aus dem Netz nach, den validator konnte ich leider so nicht mit einbinden, daher gibt es als Datei einzeln dazu.


    Ich hoffe es findet sich jemand, der mich diesbezüglich erleuchten kann. Ich bin nun schon eine ganze weile damit beschäftigt und komme nicht mehr weiter.


    Viele grüße und Danke

  • Hallo und willkommen im Forum,

    bei deiner Testseite steige ich leider nicht durch.

    Zitat

    den validator konnte ich leider so nicht mit einbinden, daher gibt es als Datei einzeln dazu.

    Eine solche Datei kann ich nicht finden. Hast Du statt dessen das JS des Validators inline in die HTML-Datei kopiert?

  • Hallo,

    die Datei liegt im ZIP-File mit drin, sie heißt jquery.js. Eingebunden wird sie in Zeile 33 von test.html.

    Zwischen Zeile 35 und 173 erfolgt wird aus dem <select>eine "Combobox" (also <input> + button/link).

    Zeile 196 bis 261 sind für die Validierung zuständig.

  • Hallo,

    vielen dank. Ich konnte deine Lösung sofort für meine richtige Seite adaptieren.

    Darf ich fragen, welchen Debugger du verwendet hast?

    Viele Grüße und nochmal Danke!

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!