|
|||
Brauche Hilfe bei Anordnung meiner Formularelemente
Hallo,
ich habe ein Formular, ohne Tabellen, mit CSS gebastelt. Die Inhalte werde u.a. mit JQuery geprüft. Das design passt wunderbar. aber die meldungen über erfolgreiche oder fehlgeschlagene validierng erscheinen mitten im formular und verschieben alles. und ich habe keine ahnung welches css-rädchen ich betätigen muss, damit die meldung von jquery rechts neben dem input-feld erscheint. hier html code mit dem formular und jquery: HTML-Code:
<html> <head> <title> Registrierung</title> <meta http-equiv="Content-Type" content="text/html; encoding=utf-8"> <script src="../login_test/js/jquery.js" type="text/javascript"></script> <script src="../login_test/js/jquery.validate.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" media="screen" href="../login_test/css/form.css" /> <style type="text/css"> pre { text-align: left; } </style> <script id="demo" type="text/javascript"> $(document).ready(function() { // validate signup form on keyup and submit var validator = $("#signupform").validate({ rules: { firstname: "required", lastname: "required", username: { required: true, minlength: 2, remote: "checkuser.php" }, password: { required: true, minlength: 5 }, password_confirm: { required: true, minlength: 5, equalTo: "#password" }, email: { required: true, email: true, remote: "checkmail.php" }, }, messages: { firstname: "Bitte gib deinen Vornamen an", lastname: "Bitte gib deinen Nachnamen an", username: { required: "Du brauchst einen Usernamen", minlength: jQuery.format("Mindestens {0} Zeichen"), remote: jQuery.format("Leider vergeben") }, password: { required: "Du brauchst ein Passwort", rangelength: jQuery.format("Mindestens {0} Zeichen") }, password_confirm: { required: "Bitte bestätige das Passwort", minlength: jQuery.format("Mindestens {0} Zeichen"), equalTo: "Die Passwörter stimmen nicht überein" }, email: { required: "Bitte gib' eine E-Mail Adresse an", minlength: "Bitte gib' eine gültige E-Mail Adresse an", remote: jQuery.format("Leider vergeben") }, }, // the errorPlacement has to take the table layout into account errorPlacement: function(error, element) { if ( element.is(":radio") ) error.appendTo( element.parent().next().next() ); else if ( element.is(":checkbox") ) error.appendTo ( element.next() ); else error.appendTo( element.parent().next() ); }, // specifying a submitHandler prevents the default submit, good for the demo //submitHandler: function() { //alert("submitted!"); // }, // set this class to error-labels to indicate valid fields success: function(label) { // set as text for IE label.html(" ").addClass("checked"); } }); }); </script> </head> <body> <form action="register.php" method="post" name="signupform" id="signupform"> <fieldset> <legend>Registrierung</legend> <ol> <li> <label id="lusername" for="username" >Username</label> <input id="username" name="username" type="text" maxlength="50" /> </li> <li> <label id="lpassword" for="password" >Passwort</label> <input id="password" name="password" type="password" maxlength="50" /> <span status></span> </li> <li> <label id="lpassword_confirm" for="password_confirm" >Wiederholen</label> <input id="password_confirm" name="password_confirm" type="password" maxlength="50" /><span status></span> </li> <li> <label id="lemail" for="email" >Email</label> <input id="email" name="email" type="text" maxlength="150" /><span status></span> </li> <li> <input name="doRegister" type="submit" id="doRegister" value="Register" /> </li> </ol> </fieldset> </form> </body> </html> hier der css code: HTML-Code:
.fieldset { border-spacing: 0px; border-collapse: collapse; empty-cells: show; } label { font-size:18px; float: left; margin-right: 0.5em; margin-top: 10px; padding-top: 2px; padding-right: 1px; vertical-align: middle; text-align: right; width: 125px; white-space: nowrap; } label.error { background:url("/login_test/images/unchecked.gif") no-repeat 0px 0px; padding-left: 16px; padding-bottom: 2px; font-weight: bold; color: #EA5200; float: left; } label.checked { background:url("/login_test/images/checked.gif") no-repeat 0px 0px; } status { padding-top: 2px; padding-left: 8px; vertical-align: top; width: 246px; white-space: nowrap; } input { font-size: 14px; padding: 1px; margin-top: 10px; width: 200px; float: none; } li { list-style:none; float: none; } |
Sponsored Links |
Sponsored Links |
|
|||
position absolute ist aber nicht so gut. ja jedes textfeld individuell validiert wird, soll die fehlermeldung hinter jedem zugehörigen textfeld erscheinen.
also hinter dem email-feld "keine gültige email adresse".... mit welcher eigenschaft kann ich einen div container an ein anderes feld binden`? |
|
||||
du kannst jedes Formularfeld inkl. label z.B. so in ein div wickeln, dass hinter dem Formularfeld genügend Weissraum für den Fehlertext bleibt (Feste Breite für das div).
Den divs gibst du id's, um sie individuell ansprechen zu können.
__________________
Ein mehrfacher Gruß aus dem Südosten Klaus |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Brauche Hilfe, Tabelle + CSS | D3r-Tot | (X)HTML | 3 | 02.08.2010 15:43 |
Brauche hilfe zu vhost.conf bei einem Apache debian vServer | onkel-tom | Serveradministration und serverseitige Scripte | 5 | 16.11.2008 12:42 |
HILFE, ich brauche Hilfe von Profis! | frambuesa | CSS | 13 | 13.06.2008 22:46 |
Brauche HILFE bei CSS:ebay seite erstellen! BRAUCHE MUSTER | beavis-2005 | CSS | 2 | 23.11.2005 18:22 |
Meine ersten Gehversuche - brauche noch ein bisschen Hilfe | wellness | Site- und Layoutcheck | 9 | 25.08.2005 10:43 |