Form mit Multiselect-Liste und JS-Bibliothek "chosen"

    Hallo Community,


    ich mir eine eigene Komponente gebaut. Diese Komponente beinhaltet ein Formular im Frontend. Dieses Formular enthält neben einer Kategorieliste, Textfeldern auch eine Multiselect-Liste. Diese Multiselect-Liste habe ich mit der JS-Bibliothek "chosen.jquery" versehen, um das Handling zu verbessern. So weit so gut.


    Hier mal die Felddefinitionen:

    Code
    <field             name="field_id"            type="list"            label="COM_HEKAINNOVATIONS_FIELD_LABEL"            description="COM_HEKAINNOVATIONS_FIELD_DESC"            class="span9"            multiple="true"            default=""            required="true">            <option value="1">COM_HEKAINNOVATIONS_FIELD_1</option>            <option value="2">COM_HEKAINNOVATIONS_FIELD_2</option>            <option value="3">COM_HEKAINNOVATIONS_FIELD_3</option>            <option value="4">COM_HEKAINNOVATIONS_FIELD_4</option>            <option value="5">COM_HEKAINNOVATIONS_FIELD_5</option>            <option value="6">COM_HEKAINNOVATIONS_FIELD_6</option>        </field>


    Meine Harausforderung liegt im "required=true". Die Multiselect-Liste ist default nur mit einem Placeholder versehen. Es muss eine Option ausgewählt werden, bevor das Formular abgesendet werden kann.


    Bei den anderen Pflichtfeldern wird über JS ein Hinweis angezeigt (siehe Anhang). Bei der Multiselect-Liste jedoch nicht. Und ich erhalte die Fehlermeldung:

    Code
    An invalid form control with name='jform[field_id][]' is not focusable.


    Die JS-Bibliothek "chosen.jquery" ersetzt ja quasi die Multiselect-Liste und setzt diese auf "display: none;".


    Gibt es einen Workaround, um den Hinweis, wie bei den anderen Feldern einzublenden?


    teccrow

  • Zum hilfreichsten Beitrag springen

    Aus meiner Sicht:

    • prüft der Validator, ob das Format des Inhaltes der Eingabe korrekt ist (z.B. Email-Adresse-Format usw.)
    • während "required" ein Feld ist, welches ausgefüllt werden muss.

    Oder liege ich da falsch?


    Wenn ich im Fieldset required="true" angebe, wird ja bereits geprüft, ob das Feld ausgefüllt wurde. Es gibt nur keine Anzeige mehr, das das Feld "display:none;" ist.

    • Hilfreich

    Du bekommst eine Fehlermeldung durch den Browser Chrome, weil du dessen Validierung verwendest. Das Problem ist mindestens für Chrome bekannt (siehe Link). Die Lösungsansätze 1) required nicht verwenden 2) hidden nicht verwenden oder 3) "client-seitige" Validierung verwenden = Joomla-Validierung wie gezeigt durch 1 zusätzliche Zeile in deiner Formular-PHP.


    Die browsereigene Validierung ist auch längst nicht so zuverlässig wie die in Joomla integrierte, die stetig verbessert wird. Sieht in jedem Browser anders aus. Und nicht alle Browser unterstützen sie korrekt bzw. mehr oder weniger "gut".

    Zitat

    Du bekommst eine Fehlermeldung durch den Browser Chrome, weil du dessen Validierung verwendest.


    Aha, das war mir bisher nicht klar!


    Zitat

    3) "client-seitige" Validierung verwenden = Joomla-Validierung


    Okay, habe ich gemacht und funktioniert. Dieses Tutorial hat mir dabei geholfen.


    Danke!