Formular "Konto erstellen" mit JS nutzerfreundlich gestaltet

[japadi83]

Wow, vielen Dank für deine schnelle Antwort und direkt mehrere gute Lösungsansätze!
Da muss ich gleich mal schauen welche Variante ich einbaue. 

[hpzeller]

@p3e
@Roberto

Mittlerweile habe ich mich nun ein bisschen intensiver mit den Möglichkeiten welche HTML5 zur Validierung von Formularen bietet beschäftigt, will heissen ich habe eine browserseitige Validierung des Formulars "Konto erstellen" mit den Möglichkeiten die HTML5 bietet in meinem Shopprojekt "xos-shop" umgesetzt.

Nachfolgend die Links zu den Ergebnissen mit ein paar Bemerkungen dazu.

Browser-Vorvalidierung der Formulareingabe nur mit den Mitteln die HTML5 bietet.
https://(( Wir dulden keine kommerziellen Werbelinks - Bitte Forenregeln beachten! ))/shop_demo/Konto-erstellen.html/n/tpl/cosmo-responsive

Bemerkungen:
Die Meldetexte sind vom Browser vorgegeben und werden in der vom Browser bevorzugten Sprache angezeigt, ist der Shop Mehrsprachig z.B. Deutsch/Englisch und die vom Browser bevorzugte Sprache ist Deutsch, dann werden die Meldetexte beim Umschalten auf Englisch nicht in Englisch sondern in Deutsch ausgegeben.
Eine Validierung bezüglich des identischen Inhalts zweier Eingabefelder ist nicht möglich, eine Passwortbestätigung kann somit also nicht validiert werden.
Fehlerhafte Eingabefelder werden bei längeren Formularen ganz oben am Browserrand angezeigt, wenn nun die Beschriftung des Eingabefeldes oberhalb desselben steht kann man sie gar nicht sehen.

Browser-Vorvalidierung der Formulareingabe mit den Mitteln die HTML5 bietet plus JavaScript.
https://(( Wir dulden keine kommerziellen Werbelinks - Bitte Forenregeln beachten! ))/shop_demo/Konto-erstellen.html/n/tpl/flatly-responsive

Bemerkungen:
Die Javascript Unterstützung dient dazu die Meldetexte individuell, also dem jeweiligen Eingabefeld angepasst und Sprachabhängig anzuzeigen, als auch dazu den Inhalt zweier Eingabefelder, konkret Passwort und Passwortbestätigung, auf Identität zu validieren.

Keine browserseitige Vorvalidierung, nur serverseitige Validierung der Formulareingabe.
https://(( Wir dulden keine kommerziellen Werbelinks - Bitte Forenregeln beachten! ))/shop_demo/Konto-erstellen.html/n/tpl/sandstone-responsive

Mein Fazit:
Eine Browser-Vorvalidierung der Formulareingabe nur mit den Mitteln die HTML5 bietet halte ich für Shopsysteme, insbesondere mehrsprachige Shopsysteme, ungeeignet.

Gruss
Hanspeter

[Herr_Bert]

Guten Tag 
durch den Einbau dieses Moduls https://www.modified-shop.org/forum/index.php?topic=30863.0 ist jetzt eine Zeile auf dem Registrierungsformular hinzugekommen.
Wie kann ich dieses Feld denn an die Breite der anderen Felder angleichen?

Herr_Bert

[Viol]

Wenn Du es so haben willst, wie die oberen, solltest Du die Werte entsprechend übernehmen.
Im Firefox bekommst Du das mit "untersuchen" sehr schnell heraus.
Wenn ich bei Dir das Abfragefeld "untersuchen" lasse, erhalte ich <select name="question">
Wenn Du dann rechts im "Untersuchen"-Feld bei Regeln das + Zeichen klickst, wird dort
"select" eingefügt.
Wenn Du hier diese Werte eingibst:

Code: CSS  [Auswählen]

{
    width: 95%;
    background-color: #FFF;
    height: 26px;
    border: 1px solid #7F8C8D;
    margin-top: 5px;
    margin-bottom: 10px;
    border-radius: 4px;
    padding-bottom: 5px;
}

eingibst, sieht das bei mir ganz gut aus. Du musst das dann entsprechend in Deine Stylesheet.css einbauen.

[Herr_Bert]

Hallo und Dankeschön für die Hilfe 
aber in der entsprechenden css Datei muss ja noch ein Name oben drüber, wäre das dann question oder wie kann ich das dann miteinander verbinden?
Herr_Bert

[hpzeller]

Hallo Herr_Bert

Suche in 'templates/xtc5/css/vorlage_grid-1.css' folgenden Code

Code: CSS  [Auswählen]

.login_input input{
        background-color: #FFF;
        float: left;
        height: 26px;
        width: 99%;
        border: 1px solid #7F8C8D;
        margin-top: 5px;
        margin-bottom: 10px;
        border-radius: 4px;
        padding-top: 5px;
        padding-bottom: 5px;
        text-indent: 15px;
}
 

und ersetze ihn mit diesem Code

Code: CSS  [Auswählen]

.login_select select,
.login_input input{
        background-color: #FFF;
        float: left;
        height: 29px;
        width: 95%;
        border: 1px solid #7F8C8D;
        margin-top: 5px;
        margin-bottom: 10px;
        border-radius: 4px;
        padding-top: 5px;
        padding-bottom: 5px;
        text-indent: 2px;
}
 

Suche in 'template/xtc5/module/create_account.html' folgenden Code

Code: XML  [Auswählen]

<div class="highlightbox">{$SELECT_QUESTION}</div>

und ersetze ihn mit diesem Code

Code: XML  [Auswählen]

<div class="login_select">{$SELECT_QUESTION}</div><br />

Gruss
Hanspeter

[Herr_Bert]

auch dafür Hanspeter, jetzt passt die Länge, sogar an den Abstand zwischen Text und Auswahlfeld hast Du gedacht.
In diesem Thread https://www.modified-shop.org/forum/index.php?topic=36232.msg339373#msg339373 hast du mir die Pfeile auch noch angepasst, das wollte ich gerade für den Pfeil an diesem Auswahlfeld auch machen  aber da fehlt es bei mir doch, ich finde nicht die richtige Stelle.
Könntest Du diesen Pfeil auch noch anpassen 
Herr_Bert

[hpzeller]

Füge in 'templates/xtc5/css/vorlage_grid-1.css' nach dem Code den ich dir in Antwort #50 gepostet habe noch folgenden Code ein.

Code: CSS  [Auswählen]

.login_select select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: url(../buttons/german/button_select.gif);
        background-position: right center;
        background-repeat: no-repeat;
}
 

Gruss
Hanspeter

[Herr_Bert]

Vielen Dank, das Formular sieht jetzt wirklich gut aus, jetzt kann ich viel besser schlafen
Auch dir eine gute Nacht und ein schönes Wochenende 

Herr_Bert