Hallo zusammen wiedermal ein kleines Problem. Ich habe ein Kontaktformular via Tabelle erstellt. Die Felder sind quasi abgerundete CSS INPUTs. Wird reingeklickt werden die Felder Gelb Unterlegt (umrandet). Via Jquery wird überprüft auf fehleingaben. Ist ein Feld Fehlerhaft ausgeführt werden diese Rot Unterlegt. Nun wenn zb Name oder Vorname Rot Unterlegt sind und ich auf das erste Feld Klicke, verschwindet von dem feld rechts daneben (3. Spalte) der Inhalt, und das Feld bekommt aufeinmal sehr Kuriose und wahllos aussende Werte bei top, left und display ist hidden.
Nachfolgend Poste ich passende Codeschnippsel.
Würde gerne Wissen woran das liegt um diesen nervigen Fehler zu vermeiden, ich freue mich auf eure Antworten.
Kontaktformular:
KONTAKT
Anrede*
Frau Herr
Name*
Vorname*
Firma
Straße*
PLZ/Ort*
Telefon*
Email*
Betreff
Anfrage*
JQuery Abfrage:
function checkForm2() {
var strFehler=’’;
if (document.kontaktformular.Anrede.value==null)
{
$(’#form_anrede’).qtip({
content: {
text: ‚Bitte Wählen Sie die Anrede aus !‘
},
show: {
event: false, // Don’t specify a show event…
ready: true // … but show the tooltip when ready
},
hide: false, // Don’t specify a hide event either!
});
}
if (document.kontaktformular.Name.value==""){
strFehler += „Feld Name ist leer\n“;
$("#form_name").css({„box-shadow“:„inset 0 0 4px #8f1420“})
$(’#form_name’).qtip({
content: {
text: ‚Bitte tragen Sie ihren Namen ein !‘
},
show: {
event: false, // Don’t specify a show event…
ready: true // … but show the tooltip when ready
},
hide: false, // Don’t specify a hide event either!
});
}
else
{
$("#form_name").css({„box-shadow“:„inset 0 0 4px #000“}) ;
}
if (document.kontaktformular.Vorname.value==""){
strFehler += „Feld Vorname ist leer\n“;
$("#form_vorname").css({„box-shadow“:„inset 0 0 4px #8f1420“})
$(’#form_vorname’).qtip({
content: {
text: ‚Bitte tragen Sie ihren Vornamen ein !‘
},
show: {
event: false, // Don’t specify a show event…
ready: true // … but show the tooltip when ready
},
hide: false, // Don’t specify a hide event either!
});
}
else
{
$("#form_vorname").css({„box-shadow“:„inset 0 0 4px #000“})
}
if (document.kontaktformular.Strasse.value==""){
strFehler += „Feld Straße ist leer\n“;
$("#form_strasse").css({„box-shadow“:„inset 0 0 4px #8f1420“});
$(’#form_strasse’).qtip({
content: {
text: ‚Bitte tragen Sie ihre Strasse ein !‘
},
show: {
event: false, // Don’t specify a show event…
ready: true // … but show the tooltip when ready
},
hide: false, // Don’t specify a hide event either!
});
}
else
{
$("#form_strasse").css({„box-shadow“:„inset 0 0 4px #000“})
}
if (document.kontaktformular.plzstadt.value.length0) {
// alert(„Festgestellte Probleme: \n\n“+strFehler);
$("#form_name").tooltip(„TEST“);
return(false);
}
}
function validEmail(email) {
var strReg = „^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$“;
var regex = new RegExp(strReg);
return(regex.test(email));
}
CSS:
div#contactheader.contactheader
{
position:relative;
top:-200px;
width:100%;
height:142px;
padding:0px;
margin:0px;
spacing:0px;
background-image: url(images/contactheader.png);
z-index:1;
}
div#mainform.mainform
{
position:relative;
top:-200px;
padding:0px;
margin:0px;
background-image: url(images/contactmain_back.png);
width:100%;
height: 800px;
z-index:1; margin-bottom: -200px;
}
input[type=„text“] {
-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
border-color:"#cfcfcf";
-moz-box-shadow: inset 0 0 1px #000;
-webkit-box-shadow: inset 0 0 1px #000;
box-shadow: inset 0 0 2px #000;
font-size: 10px;
border-width:1px;
border-left:1px;
border:1px;
padding-left:10px;
width:232px;
height:34px;
color: #a3a3a4; }
input[type=„text“]:focus {
box-shadow: inset 0 0 4px #f1940a;
}
#long
{
background-repeat:no-repeat;
font-size: 10px;
width:632px;
height:36px;
color: #a3a3a4;
}
#absenden
{
background-color: transparent;
background-image: url(‚images/senden.png‘);
border: 0px;
font-size: 10px;
padding-left:0px;
width:131px;
height:37px;
color: #a3a3a4;
}
textarea {
background-repeat:no-repeat;
border: 0px;
font-family: verdana;
font-size: 10px;
padding-left:10px;
padding-top:10px;
width:630px;
max-width:630px;
min-width:630px;
max-height:181px;
min-height:181px;
height:181px;
-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
border-color:"#cfcfcf";
-moz-box-shadow: inset 0 0 1px #000;
-webkit-box-shadow: inset 0 0 1px #000;
box-shadow: inset 0 0 2px #000;
font-size: 10px;
border-width:1px;
border-left:1px;
border:1px;
color: #a3a3a4; }
textarea:focus {
box-shadow: inset 0 0 4px #f1940a;
}
.contactframe
{
top:40px;
position:relative;
width:1000px;
margin:0 auto;
}
.formular{
background-image: url(images/contactmain_back.png);
position:relative;
width:730px;
float:left;
}
Liebe Grüße
