 |
| Hinweise |
Willkommen im TP-Hilfe-Forum!Dies ist ein Forum zu den Themen Photoshop, Dreamweaver, Flash, Selbständigkeit und mehr, in dem Du Hilfe, Anleitung oder eine Lösung zu Deinen Problemen erhältst. Aktuell bist Du in unseren Foren als Gast mit reinen Leserechten unterwegs. Wenn Du Dich registrierst, kannst Du eigene Themen verfassen, Fragen stellen und privat mit anderen TPlern kommunizieren. Weitere Foren werden zugänglich, und Du wirst – falls gewünscht – per Mail über neue Beiträge informiert. Die Registrierung ist schnell und kostenlos. Sollten bei der Registrierung Fragen auftauchen, reicht ein Klick in unsere Hilfe - Häufig gestellte Fragen oder eine kurze Mitteilung an das Support-Team. Viel Spaß bei Traum-Projekt.com |
08.05.2008, 10:35
|
#1
|
|
TP-Junior
Registriert seit: Jan 2008
|
Grafikbutton im Formular > Problem mit Validation
Hallo,
Ich habe folgendes Problem und wäre über Hilfe sehr dankbar:
Ich habe ein funktionierendes Formular das sich auf zwei Seiten aufteilt, jedoch auf einer einzigen html Seite gecodet ist.
Die erste Seite beinhaltet ein paar radios, die zweite Seite die normalen Kontaktinfos und die dritte Seite ist nur die Bestätigung über den Absendevorgang.
Alles einwandfrei...
Wenn ich jetzt jedoch aus den normalen "Weiter" und "Submit" Buttons grafische Buttons mache kommt schon bei Klick auf Weiter die Fehlermeldung das bitte alle Felder ausgefüllt werden mögen obwohl ich auf Seite 2 noch keine Daten eingegeben habe. Diese Meldung soll natürlich nur kommen wenn ich auf den Absenden Button klicke und einige Felder vom Nutzer vergessen wird. Die Abfrage findet also zu früh statt.
Dies hier sind die normalen Buttons:
Weiter:
Code:
<input type=button onClick="if (validatePage1()) { collapseElem('mainForm_1'); expandElem('mainForm_2');}" class="mainForm" value="Weiter"/>
Und Absenden:
Code:
<input id="saveForm" class="mainForm" type="submit" value="Absenden" />
Eingefügt habe ich die Grafik bei "Weiter" so:
Code:
<input type=image onClick="if (validatePage1()) { collapseElem('mainForm_1'); expandElem('mainForm_2');}" "src="/index_r7_c12.jpg" value="Weiter"/>
Die Frage ist also: Warum findet die Abfrage zu früh statt und wie kann ich das verhindern?
Geändert von [LaBeerdy] (08.05.2008 um 10:51 Uhr).
|
|
|
10.05.2008, 18:10
|
#2
|
|
TP-Junior
Registriert seit: Jan 2008
|
Hm,...hat keiner eine Idee?
Vielleicht zumindest einen Lösungsansatz?
|
|
|
10.05.2008, 19:19
|
#3
|
|
TP-Urgestein
Registriert seit: Nov 2003
Ort: NRW
|
Ggf. hilft es, wenn Du mal mehr zeigst ... wir haben hier keine Glaskugeln.
|
|
|
10.05.2008, 19:20
|
#4
|
|
TP-Senior
Registriert seit: Apr 2008
|
Schon mal versucht, den Butten per CSS mit einer Klasse zu formatieren?
|
|
|
10.05.2008, 23:27
|
#5
|
|
TP-Junior
Registriert seit: Jan 2008
|
Eine Klasse ist schon zugeordnet...Daher denke ich nicht das da das Problem liegt. Oder müssen in dieser Klasse ganz bestimmte Werte eingetragen sein?
Jedenfalls hier einmal der gesamte Code. Aber von der funktionierenden Version habe ich wie gesagt nur die Dinge geändert die in meinem ersten Beitrag zu sehen sind.
Den Link um sich den Fehler mal anzusehen: Link
Ben: aod-web
Pass: testzugang
HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>AOD-Web Kontakt</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><link href="style.css" rel="stylesheet" type="text/css">
<!-- calendar stuff -->
<link rel="stylesheet" type="text/css" href="calendar/calendar-blue2.css" />
<script type="text/javascript" src="calendar/calendar.js"></script>
<script type="text/javascript" src="calendar/calendar-en.js"></script>
<script type="text/javascript" src="calendar/calendar-setup.js"></script>
<!-- END calendar stuff -->
<!-- expand/collapse function -->
<SCRIPT type=text/javascript>
<!--
function collapseElem(obj)
{
var el = document.getElementById(obj);
el.style.display = 'none';
}
function expandElem(obj)
{
var el = document.getElementById(obj);
el.style.display = '';
}
//-->
</SCRIPT>
<!-- expand/collapse function -->
<!-- expand/collapse function -->
<SCRIPT type=text/javascript>
<!--
// collapse all elements, except the first one
function collapseAll()
{
var numFormPages = 2;
for(i=2; i <= numFormPages; i++)
{
currPageId = ('mainForm_' + i);
collapseElem(currPageId);
}
}
//-->
</SCRIPT>
<!-- expand/collapse function -->
<!-- validate -->
<SCRIPT type=text/javascript>
<!--
function validateField(fieldId, fieldBoxId, fieldType, required)
{
fieldBox = document.getElementById(fieldBoxId);
fieldObj = document.getElementById(fieldId);
if(fieldType == 'text' || fieldType == 'textarea' || fieldType == 'password' || fieldType == 'file' || fieldType == 'phone' || fieldType == 'website')
{
if(required == 1 && fieldObj.value == '')
{
fieldObj.setAttribute("class","mainFormError");
fieldObj.setAttribute("className","mainFormError");
fieldObj.focus();
return false;
}
}
else if(fieldType == 'menu' || fieldType == 'country' || fieldType == 'state')
{
if(required == 1 && fieldObj.selectedIndex == 0)
{
fieldObj.setAttribute("class","mainFormError");
fieldObj.setAttribute("className","mainFormError");
fieldObj.focus();
return false;
}
}
else if(fieldType == 'email')
{
if((required == 1 && fieldObj.value=='') || (fieldObj.value!='' && !validate_email(fieldObj.value)))
{
fieldObj.setAttribute("class","mainFormError");
fieldObj.setAttribute("className","mainFormError");
fieldObj.focus();
return false;
}
}
}
function validate_email(emailStr)
{
apos=emailStr.indexOf("@");
dotpos=emailStr.lastIndexOf(".");
if (apos<1||dotpos-apos<2)
{
return false;
}
else
{
return true;
}
}
function validateDate(fieldId, fieldBoxId, fieldType, required, minDateStr, maxDateStr)
{
retValue = true;
fieldBox = document.getElementById(fieldBoxId);
fieldObj = document.getElementById(fieldId);
dateStr = fieldObj.value;
if(required == 0 && dateStr == '')
{
return true;
}
if(dateStr.charAt(2) != '/' || dateStr.charAt(5) != '/' || dateStr.length != 10)
{
retValue = false;
}
else // format's okay; check max, min
{
currDays = parseInt(dateStr.substr(0,2),10) + parseInt(dateStr.substr(3,2),10)*30 + parseInt(dateStr.substr(6,4),10)*365;
//alert(currDays);
if(maxDateStr != '')
{
maxDays = parseInt(maxDateStr.substr(0,2),10) + parseInt(maxDateStr.substr(3,2),10)*30 + parseInt(maxDateStr.substr(6,4),10)*365;
//alert(maxDays);
if(currDays > maxDays)
retValue = false;
}
if(minDateStr != '')
{
minDays = parseInt(minDateStr.substr(0,2),10) + parseInt(minDateStr.substr(3,2),10)*30 + parseInt(minDateStr.substr(6,4),10)*365;
//alert(minDays);
if(currDays < minDays)
retValue = false;
}
}
if(retValue == false)
{
fieldObj.setAttribute("class","mainFormError");
fieldObj.setAttribute("className","mainFormError");
fieldObj.focus();
return false;
}
}
//-->
</SCRIPT>
<!-- end validate -->
<style type="text/css">
<!--
.Stil1 {color: #FFFFFF}
.Stil8 {font-size: 24px; font-weight: bold; color: #FFFFFF;}
body {
margin-left: 10px;
margin-top: 0px;
margin-right: 2px;
margin-bottom: 0px;
}
.Stil11 {
color: #000000;
font-size: 26px;
}
.Stil12 {font-size: 14px}
.Stil13 {
font-size: 22px;
font-family: Verdana;
}
.Stil14 {font-size: 13px}
.Stil15 {font-family: Verdana}
body,td,th {
font-family: Verdana;
}
-->
</style>
</head>
<body onLoad="collapseAll()">
<div id="mainForm">
<div id="formHeader">
<table width="402" border="0" align="center" cellspacing="0">
<tr>
<th width="400" height="45" scope="col"><div align="left" class="Stil8 Stil11 Stil13">Ihre Anfrage</div></th>
</tr>
</table>
</div>
<BR/><!-- begin form -->
<form method=post enctype=multipart/form-data action=processor.php onSubmit="return validatePage2();">
<ul class=mainForm id="mainForm_1">
<table width="442" border="0" align="center" cellspacing="0">
<tr>
<td scope="col"><div align="left" class="Stil12 Stil15">Gerne unterbreiten wir Ihnen ein Angebot zum monatlichen Festpreis. Wenn Sie uns einige Angaben zu sich bzw. Ihrem Betrieb machen, können wir vorab recherchieren, welches Net-Konzept zu Ihnen und Ihrer Branche passt und auch schon gleich kostenfrei einige Namensvorschläge (wenn Sie noch keine haben) unterbreiten.</span></div></td>
</tr>
</table>
<br>
<li class="mainForm" id="fieldBox_1"><label class="formFieldQuestion"><strong>Verfügen Sie bereits über eine Internetadresse oder eine Webpräsenz? </strong><br>
<br>
</label><span>
<input class=mainForm type=radio name=field_1 id=field_1_option_1 value="Ich habe bereits eine Internetadresse (Domain) und möchte sie behalten." /><label class=formFieldOption for="field_1_option_1">Ich habe bereits eine Internetadresse (Domain) und möchte sie behalten.<br>
<br>
</label><input class=mainForm type=radio name=field_1 id=field_1_option_2 value="Ich habe noch keine Internetadresse (Domain)." /><label class=formFieldOption for="field_1_option_2">Ich habe noch keine Internetadresse (Domain).<br>
<br>
</label><input class=mainForm type=radio name=field_1 id=field_1_option_3 value="Ich habe bereits eine Domain, möchte zu einer griffigeren wechseln und möchte Vorschläge." /><label class=formFieldOption for="field_1_option_3">Ich habe bereits eine Domain, möchte zu einer griffigeren wechseln und möchte Vorschläge.<br>
<br>
</label><input class=mainForm type=radio name=field_1 id=field_1_option_4 value="Meine bestehende Seite soll überarbeitet werden." /><label class=formFieldOption for="field_1_option_4">Meine bestehende Seite soll überarbeitet werden.<br>
<br>
</label></span></li>
<li class="mainForm" id="fieldBox_2"><span class="Stil14"><span class="Stil12"><strong class="formFieldQuestion">Ich habe eine Domain und eine Webpräsenz, möchte mir aber noch eine weitere Webpräsenz aufbauen.
</strong></span></span>
<span class="Stil12"><br>
</span><br>
<label class="formFieldQuestion"></label><span>
<input class=mainForm type=radio name=field_2 id=field_2_option_1 value="für den bestehenden Betrieb." /><label class=formFieldOption for="field_2_option_1">für den bestehenden Betrieb.<br>
<br>
</label><input class=mainForm type=radio name=field_2 id=field_2_option_2 value="für eine neue Zweigstelle." /><label class=formFieldOption for="field_2_option_2">für eine neue Zweigstelle.<br>
<br>
</label><input class=mainForm type=radio name=field_2 id=field_2_option_3 value="für einen neuen Betrieb." /><label class=formFieldOption for="field_2_option_3">für einen neuen Betrieb.<br>
<br>
</label></span></li>
<div align="center">
<!-- end of this page -->
<!-- page validation -->
<SCRIPT type=text/javascript>
<!--
function validatePage1()
{
retVal = true;
if (validateField('field_1','fieldBox_1','radio',1) == false)
retVal=false;
if (validateField('field_2','fieldBox_2','radio',1) == false)
retVal=false;
if(retVal == false)
{
alert('Please correct the errors. Fields marked with an asterisk (*) are required');
return false;
}
return retVal;
}
//-->
</SCRIPT>
<!-- end page validaton -->
<!-- next page buttons -->
<input name="next" type=image class="mainForm" id="next" onClick="if (validatePage1()){ collapseElem('mainForm_1'); expandElem('mainForm_2');}" value="Weiter"src="/index_r7_c12.jpg" alt="Weiter" />
<!-- close the display stuff for this page -->
</div>
</ul>
<ul class=mainForm id="mainForm_2">
<li class="mainForm" id="fieldBox_3">
<label class="formFieldQuestion">Firmenbezeichnung</label><input class=mainForm type=text name=field_3 id=field_3 size='20'>
</li>
<li class="mainForm" id="fieldBox_4">
<label class="formFieldQuestion">Firmentyp *</label>
<select class=mainForm name=field_4 id=field_4>
<option value=" " selected> </option>
<option value="GmbH">GmbH</option>
<option value="GmbH & Co. KG">GmbH & Co. KG</option>
<option value="GbR">GbR</option>
<option value="AG">AG</option><option value="Ltd.">Ltd.</option><option value="Einzelfirma">Einzelfirma</option><option value="Privat">Privat</option><option value="Andere">Andere</option>
</select>
</li>
<li class="mainForm" id="fieldBox_5">
<label class="formFieldQuestion">Vorname *</label><input class=mainForm type=text name=field_5 id=field_5 size='20'>
</li>
<li class="mainForm" id="fieldBox_6">
<label class="formFieldQuestion">Nachname *</label><input class=mainForm type=text name=field_6 id=field_6 size='20'>
</li>
<li class="mainForm" id="fieldBox_7">
<label class="formFieldQuestion">Anschrift *</label><input name=field_7 type=text class=mainForm id=field_7 value="Straße" size='20'>
<input name=field_8 type=text class=mainForm id=field_8 value="Nr." size='2'>
<br>
<br>
<input name=field_9 type=text class=mainForm id=field_9 value="PLZ" size='5'>
<input name=field_10 type=text class=mainForm id=field_10 value="Ort" size='17'>
<br>
<label class="formFieldQuestion Stil1"></label>
</li>
<li class="mainForm" id="fieldBox_11">
<label class="formFieldQuestion">Telefon *</label>
<input class=mainForm type=text name=field_15 id=field_15 size='5'>
<input class=mainForm type=phone name=field_11 id=field_11 size=17>
</li>
<li class="mainForm" id="fieldBox_12">
<label class="formFieldQuestion">Telefax</label>
<input class=mainForm type=text name=field_16 id=field_16 size='5'>
<input class=mainForm type=text name=field_12 id=field_12 size='17'>
</li>
<li class="mainForm" id="fieldBox_13">
<label class="formFieldQuestion">E-Mail *</label>
<input name=field_13 type=email class="mainForm" id=field_13 size=21>
<br>
<br>
<label class="formFieldQuestion">Ihre Nachricht:</label>
<textarea name="field_14" cols="40" rows="4" class="mainForm" id="field_14"></textarea>
</li>
<div align="center">
<!-- end of this page -->
<!-- page validation -->
<SCRIPT type=text/javascript>
<!--
function validatePage2()
{
retVal = true;
if (validateField('field_3','fieldBox_3','text',0) == false)
retVal=false;
if (validateField('field_4','fieldBox_4','menu',1) == false)
retVal=false;
if (validateField('field_5','fieldBox_5','text',1) == false)
retVal=false;
if (validateField('field_6','fieldBox_6','text',1) == false)
retVal=false;
if (validateField('field_7','fieldBox_7','text',1) == false)
retVal=false;
if (validateField('field_8','fieldBox_8','text',1) == false)
retVal=false;
if (validateField('field_9','fieldBox_9','text',1) == false)
retVal=false;
if (validateField('field_10','fieldBox_10','text',1) == false)
retVal=false;
if (validateField('field_11','fieldBox_11','phone',1) == false)
retVal=false;
if (validateField('field_12','fieldBox_12','text',0) == false)
retVal=false;
if (validateField('field_13','fieldBox_13','email',1) == false)
retVal=false;
if (validateField('field_14','fieldBox_14','website',0) == false)
retVal=false;
if (validateField('field_15','fieldBox_11','text',1) == false)
retVal=false;
if(retVal == false)
{
alert('Bitte überprüfen sie alle rot gekennzeichneten Felder und ergänzen sie ihre Angaben!');
return false;
}
return retVal;
}
//-->
</SCRIPT>
<!-- end page validaton -->
<!-- next page buttons -->
</div>
<li class="mainForm">
<div align="center">
<input name="goforit" type="image" class="mainForm" id="saveForm"value="Absenden" "src="/index_r7_c12.jpg " alt="Absenden" />
</div>
</li>
</form>
<!-- end of form -->
<!-- close the display stuff for this page --></div>
<div id="footer"></div>
</body>
</html>
Geändert von [LaBeerdy] (10.05.2008 um 23:33 Uhr).
|
|
|
|
Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
|
|
|
| Themen-Optionen |
Thema durchsuchen |
|
|
|
| Thema bewerten |
|
|
Forumregeln
|
Es ist dir nicht erlaubt, neue Themen zu verfassen.
Es ist dir nicht erlaubt, auf Beiträge zu antworten.
Es ist dir nicht erlaubt, Anhänge hochzuladen.
Es ist dir nicht erlaubt, deine Beiträge zu bearbeiten.
HTML-Code ist aus.
|
|
|
Alle Zeitangaben in WEZ +2. Es ist jetzt 06:57 Uhr.
|
 |