rendered paste body<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("search", "1");
google.load("jquery", "1.7.1");
google.load("jqueryui", "1.8.11");
</script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css" rel="stylesheet" />
<link rel="stylesheet" href="css/mycss.css" />
<script type="text/javascript">
function validEmail(email){
var emailReg = /^([A-Za-z0-9_\+\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;;
var validEmail = emailReg.test(email);
if(!validEmail) {
return false;
} else {
return true;
}
}
$(document).ready(function() {
var check = $("#check").attr('value');
var email = $("#email").attr('value');
$("l').attr('value', '0');#newscheckbox").attr('checked', false);
$(".inp").focus(function(srcc){
if ($(this).val() == $(this)[0].title){
$(this).removeClass("defaultTextActive");
$(this).val("");
}
});
$(".inp").blur(function(){
if ($(this).val() == ""){
$(this).addClass("defaultTextActive");
$(this).val($(this)[0].title);
}
});
$(".inp").blur();
$.each($(".inp"),function(){
if ($(this).val() == $(this)[0].title){
$(this).addClass("defaultTextActive");
}
});
$("#fireup").click(function() {
if ($('#mail').attr('value') != $('#mail').attr('title')){
if(!validEmail($("#mail").attr('value'))){
$("<div title='Email'>Adresse nicht Valide !</div>").dialog({
bgiframe: true,
height: 300,
modal: true,
buttons: {
Abbrechen: function() {
$(this).dialog('close');
$("#mail").focus();
}
}
});
$('#email').attr('value', '1');
}else{
$('#email').attr('value', '0');
}
} else {
$('#check').attr('value', '1');
$('#error').dialog('open');
}
$(".inp").each(function() {
if($(this).val() == this.title) {
$('#check').attr('value', '1');
$('#error').dialog('open');
} else if ($(this).val() == '') {
$('#check').attr('value', '1');
$('#error').dialog('open');
}else{
$('#check').attr('value', '0');
}
});
if($("#check").val() == '0' && $("#email").val() == '0'){
$('#myform').submit();
}
});
$("#clearup").click(function() {
$('#myform').get(0).reset();
$(".inp").each(function(){
if ($(this).val() == ""){
$(this).addClass("defaultTextActive");
$(this).val($(this)[0].title);
}
});
});
$("#error").dialog({
bgiframe: true,
autoOpen: false,
height: 300,
modal: true,
buttons: {
Abbrechen: function() {
$(this).dialog('close');
}
}
});
$("button", ".demo").button();
});
</script>
</head>
<body>
<div id="maindiv" align="center">
<div id="error" title="Achtung Fehler" style="display:none">
<p>Bitte Alle Felder mit "*" ausfuellen</p>
</div>
<div id="divform" align="center">
<div style="height: auto; width: auto;" class="ui-dialog ui-widget ui-widget-content ui-corner-all ">
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<span id="ui-dialog-title-dialog" class="ui-dialog-title">HTML Formular mit jQuery & CSS</span>
</div>
<div style="height: 300px; min-height: 109px; width: auto; " class="ui-dialog-content ui-widget-content" id="dialog">
<form id="myform" action="form.html" method="post">
<p><input type="text" name="name" title="Nachname" class="inp" />*</p><br />
<p><input type="text" name="vorname" title="Vorname" class="inp" />*</p><br />
<p><input type="text" id="mail" name="mail" title="Email" class="inp" />*</p><br />
<p><textarea name="text" rows="4" style="resize: none;" text="textarea" title="Dein Text....." class="inp"></textarea><p>
<br />
<p>Newsletter abonnieren ? <input type="checkbox" value="news" id="newscheckbox" /></p>
<p><input type="hidden" name="check" id="check" value="0" /></p>
<p><input type="hidden" name="email" id="email" value="0" /></p>
</form>
</div>
<div class="demo" align="center">
<button id="fireup" />Absenden</button> <BUTTON id="clearup" />Reset</button>
</div>
</div>
</div>
</div>
</body>
</html>
// css -> css/mycss.css
*{
margin:0;
padding:0;
font:normal 12px "Lucida Grande", Arial, sans-serif;
}
body {
padding: 10px;
background-color: #849a92;
}
h1{
font-size:14px;
}
#status{
width:50%;
padding:10px;
height:42px;
outline:none;
}
input.inp{
background-color:transparent;
border: 1px solid;
height:20px;
width:160px;
color:#CCC;
}
textarea.inp {
border: 1px solid;
width:160px;
color:#CCC;
}
input.fail {
-webkit-box-shadow: inset 1px 1px 1px 1px rgba(2, 2, 2, 0.0);
-moz-box-shadow: inset 1px 1px 1px 1px rgba(2, 2, 2, 0.0);
box-shadow: inset 1px 1px 1px 1px rgba(2, 2, 2, 0.0);
}
input:focus {
color:#000000;
-webkit-box-shadow: inset 1px 1px 1px 1px rgba(2, 2, 2, 0.3);
-moz-box-shadow: inset 1px 1px 1px 1px rgba(2, 2, 2, 0.3);
box-shadow: inset 1px 1px 1px 1px rgba(2, 2, 2, 0.3);
}
textarea.fail {
-webkit-box-shadow: inset 1px 1px 1px 1px rgba(2, 2, 2, 0.0);
-moz-box-shadow: inset 1px 1px 1px 1px rgba(2, 2, 2, 0.0);
box-shadow: inset 1px 1px 1px 1px rgba(2, 2, 2, 0.0);
}
textarea:focus {
color:#000000;
-webkit-box-shadow: inset 1px 1px 1px 1px rgba(2, 2, 2, 0.3);
-moz-box-shadow: inset 1px 1px 1px 1px rgba(2, 2, 2, 0.3);
box-shadow: inset 1px 1px 1px 1px rgba(2, 2, 2, 0.3);
}