Brauche Hilfe bei Anordnung meiner Formularelemente

tomfox · #1 (**permalink**) 19.05.2010, 09:13

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 &nbsp; as text for IE
      label.html("&nbsp;").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;
}

freue mich auf eure hilfe. danke

hubspe · #2 (**permalink**) 19.05.2010, 09:43

Moin,

vielleicht wäre es das Beste wenn an einer bestimmten Stelle im Formular genügend Weissraum für die Fehlermeldung wäre.
Diesen Weissraum könnte z.B. ein leerer div-Container einnehmen, der eine feste Breite und Höhe hat. Als Inhalt dann nur ein geschütztes Leerzeichen.
Dort könntest du die Fehlermeldeung ausgeben lassen. Da würde sich dann nichts verschieben.

Oder du läßt den Weissraum ohne Element. Die Meldung wird per position:absolute da hinein plaziert. Damit das Positionieren leichter fällt bekommt das Formular position:relative;, dann orientiert sich das absolute Element daran.

tomfox · #3 (**permalink**) 19.05.2010, 11:00

danke für die antwort. ich lass das mal wirken und versuchs

gracias

tomfox · #4 (**permalink**) 19.05.2010, 11:17

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

hubspe · #5 (**permalink**) 19.05.2010, 11:24

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.

tomfox · #6 (**permalink**) 19.05.2010, 17:32

danke hubspe...den gedankenschubser hab ich gebraucht

jetzt gehts^^

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ä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