zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Brauche Hilfe bei Anordnung meiner Formularelemente

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 19.05.2010, 09:13
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.05.2010
Beiträge: 4
tomfox befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 19.05.2010, 09:43
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.087
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

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.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 19.05.2010, 11:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.05.2010
Beiträge: 4
tomfox befindet sich auf einem aufstrebenden Ast
Standard

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

gracias
Mit Zitat antworten
  #4 (permalink)  
Alt 19.05.2010, 11:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.05.2010
Beiträge: 4
tomfox befindet sich auf einem aufstrebenden Ast
Standard

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`?
Mit Zitat antworten
  #5 (permalink)  
Alt 19.05.2010, 11:24
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.087
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

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
Mit Zitat antworten
  #6 (permalink)  
Alt 19.05.2010, 17:32
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.05.2010
Beiträge: 4
tomfox befindet sich auf einem aufstrebenden Ast
Standard

danke hubspe...den gedankenschubser hab ich gebraucht

jetzt gehts^^
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:47 Uhr.