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;
}
freue mich auf eure hilfe. danke
|