XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Brauche Hilfe bei Anordnung meiner Formularelemente (http://xhtmlforum.de/showthread.php?t=61189)

tomfox 19.05.2010 10:13

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 &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 19.05.2010 10: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 19.05.2010 12:00

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

gracias

tomfox 19.05.2010 12: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 19.05.2010 12: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 19.05.2010 18:32

danke hubspe...den gedankenschubser hab ich gebraucht :)

jetzt gehts^^


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:25 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023