Моя проблемма обстоит в следующем.
Я неевлыюсь проффисиональным разработчиком или программистом.
Но состороны рукаводства встала задача сделать формуляр в короткие сроки.
Особо больших успехов я недобился и есть просъба выловить ошибки в коде.
index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Formular </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf" />
<link rel="stylesheet" href="style_html.css" type="text/css" media="screen" />
</head>
<body>
<script type="text/javascript" src="jquery-1.5.1.min.js" charset="utf"></script>
<script type="text/javascript" src="validation.js" charset="utf"></script>
<div id="content">
<form id="jform" action="" method="post">
<fieldset>
<legend>Personal Info</legend>
<label for="fullname" class="block">Vorname</label>
<input type="text" name="fullname" id="fullname" placeholder="Vorname" />
<label for="name" class="block">Name</label>
<input type="text" name="name" id="name" placeholder="Name" />
<label for="adresse" class="block">Strasse und Hausnummer</label>
<input type="text" name="adresse" id="adresse" placeholder="Strasse und Hausnummer" />
<label for="telefon" class="block">Telefon</label>
<input type="text" name="telefon" id="telefon" placeholder="Telefon" />
<label for="emailid" class="block">E-mailadresse</label>
<input type="text" name="emailid" id="emailid" placeholder="E-mailadresse" />
</fieldset>
<fieldset>
<legend>Zähler</legend>
<label for="kundenummer" class="block">Kundenummer</label>
<input type="text" name="kundenummer" placeholder="Kundenummer" />
<label for="zaehlernummer" class="block">Zählernummer</label>
<input type="text" name="zaehlernummer" placeholder="Zählernummer" />
<label for="zaehlerstand" class="block">Zählerstand</label>
<input type="text" name="zaehlerstand" placeholder="Zählerstand" />
<br />
</fieldset>
<fieldset>
<legend>Bemerkungen</legend>
<textarea rows="7" cols="50" name="comments" placeholder="Bemerkungen"></textarea>
</fieldset>
<fieldset>
<legend>Sicherheits</legend>
<td id="imgparent">
<div id="imgdiv"><img id="reload" src="images/reload.png" /><img id="img" src="captcha.php" /></td>
</div>
<label for="captcha" class="block">Enter Image Text:</label>
<input type="text" name="captcha" id="captcha" placeholder="captcha" />
<br>
<p>
<label class="block">Datenschutz:</label>
<input type="radio" name="dschutz" id="dschutz" value="dschutz" /> <label for="dschutz">Stumme zu</label>
</p>
<p>
<button type="submit" id="send" action="mail.php" >Senden</button>
</p>
</form>
</div><!-- content -->
</body>
</html>
validation.js
$(document).ready(function(){
// ====================================================== //
var jVal = {
'fullName' : function() {
$('body').append('<div id="nameInfo" class="info"></div>');
var nameInfo = $('#nameInfo');
var ele = $('#fullname');
var pos = ele.offset();
nameInfo.css({
top: pos.top-3,
left: pos.left+ele.width()+15
});
if(ele.val().length < 3) {
jVal.errors = true;
nameInfo.removeClass('correct').addClass('error').html('← Vorname darf nischt weniger als 3 Buchstaben sein !').show();
ele.removeClass('normal').addClass('wrong');
} else {
nameInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
},
'email' : function() {
$('body').append('<div id="emailInfo" class="info"></div>');
var emailInfo = $('#emailInfo');
var ele = $('#emailid');
var pos = ele.offset();
emailInfo.css({
top: pos.top-3,
left: pos.left+ele.width()+15
});
var patt = /^.+@.+[.].{2,}$/i;
if(!patt.test(ele.val())) {
jVal.errors = true;
emailInfo.removeClass('correct').addClass('error').html('← Falsche E-mailadresse.').show();
ele.removeClass('normal').addClass('wrong');
} else {
emailInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
},
'captcha' : function() {
$('body').append('<div id="captcha" class="info"></div>');
var captchaInfo = $('#captchaInfo');
var ele = $('#captcha');
var pos = ele.offset();
captcha.css({
top: pos.top-3,
left: pos.left+ele.width()+15
});
if(ele.val().length < 6) {
jVal.errors = true;
captchaInfo.removeClass('correct').addClass('error').html('← Zu Kurz').show();
ele.removeClass('normal').addClass('wrong');
} else {
captchaInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
},
'dschutz' : function (){
$('body').append('<div id="dschutzInfo" class="info"></div>');
var dschutzInfo = $('#dschutzInfo');
var ele = $('#dschutz');
var pos = ele.offset();
dschutzInfo.css({
top: pos.top-10,
left: pos.left+ele.width()+60
});
if($('input[name="dschutz"]:checked').length === 0) {
jVal.errors = true;
dschutzInfo.removeClass('correct').addClass('error').html('? Datenschutz').show();
ele.removeClass('normal').addClass('wrong');
} else {
dschutzInfo.removeClass('error').addClass('correct').html('v').show();
ele.removeClass('wrong').addClass('normal');
}
},
'sendIt' : function (){
if(!jVal.errors) {
$('#jform').submit();
}
}
};
// ====================================================== //
$('#send').click(function (){
var obj = $.browser.webkit ? $('body') : $('html');
obj.animate({ scrollTop: $('#jform').offset().top }, 750, function (){
jVal.errors = false;
jVal.fullName();
jVal.email();
jVal.captcha();
jVal.dschutz();
jVal.sendIt();
});
return false;
});
$('#fullname').change(jVal.fullName);
$('#emailid').change(jVal.email);
$('#captcha').change(jVal.captchaInfo);
$('input[name="dschutz"]').change(jVal.dschutz);
$("#reload").click(function() {
$("#img").remove();
$('<img id="img" src="captcha.php" />').appendTo("#imgdiv");
});
// ====================================================== //
});
Основная проблеммы лежит в синтаксисе validation.js
Убедительная просьба учитывая мои несовсем полные познания в программиривании, хотелось бы подробностей.
Большое спасибо за внимание и понимане.
Средний
