• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Kontaktformular AJAX, JavaScript Problem - Pflichtfelder

T

Teroa

Neues Mitglied
Huhu,

habe da ein Kontakformular welches mit JavaScript Ajax und PHP auskommt :)
Ansich funktioniert das Ganze auch, aber nur wenn alle Felder gefüllt sind.
Komme einfach nicht auf den Trichter, wo das Problem liegt. Bei den eigentlichen Pflichtfelder merkt das System, wenn ich auf "Senden" klicke, dass dieses oder jene Feld noch nicht gefüllt ist.

Aber wie gesagt es versendet nur, wenn in jedem Feld etwas drinsteht.
Sieht vielleicht jemand das Problem?

Kontaktformular
HTML: 
 <form id="message_form">
    <div class="grid_12">
    <div class="success">Vielen Dank für Ihre Nachricht! <strong>Wir werden uns schnellstmöglich bei Ihnen melden.</strong></div>
    </div>
    <div class="grid_6">
    <fieldset>
        <label class="vorname">
            <input type="text" value="Vorname:" id="vorname"><span class="pflicht">*</span>
            <span class="empty">*Dies ist ein Pflichtfeld.</span>
            <span class="clear"></span>
        </label>
        <label class="nachname">
            <input type="text" value="Nachname:" id="nachname"><span class="pflicht">*</span>
            <span class="empty">*Dies ist ein Pflichtfeld.</span>
            <span class="clear"></span>
        </label>
        <label class="email">
            <input type="text" value="E-Mail Adresse:" id="email"><span class="pflicht">*</span>
            <span class="error">*Dies ist keine korrekte E-Mail Adresse.</span>
            <span class="empty">*Dies ist ein Pflichtfeld.</span>
            <span class="clear"></span>
        </label>
        <label class="telefon">
            <input type="text" value="Telefon:" id="telefon">
            <span class="clear"></span>
        </label>
        <label class="webseite">
            <input type="text" value="Webseite:" id="webseite">
            <span class="clear"></span>
        </label>
    </div>
    <div class="grid_6">
        <label class="unternehmen">
            <input type="text" value="Unternehmen:" id="unternehmen"><span class="pflicht">*</span>
            <span class="empty">*Dies ist ein Pflichtfeld.</span>
            <span class="clear"></span>
        </label>
        <label class="strasse">
            <input type="text" value="Straße:" id="strasse">
            <span class="clear"></span>
        </label>
        <label class="ort">
            <input type="text" value="PLZ/Ort:" id="ort">
            <span class="clear"></span>
        </label>
        <label class="anzahl">
            <input type="text" value="Anzahl Tische:" id="anzahl"><span class="pflicht">*</span>
            <span class="empty">*Dies ist ein Pflichtfeld.</span>
            <span class="clear"></span>
        </label>    
    </div>
    <div class="grid_12">    
        <label class="bemerkung" id="bemerkung">
            <textarea>Weitere Bemerkung:</textarea>
            <span class="error">*Die Nachricht ist zu kurz.</span>
            <span class="clear"></span>
        </label>
        <br />
        <label class="verif_box">                      
            <input value="Captcha:" name="verif_box" type="text" id="verif_box"><span class="pflicht">*</span>
  <img src="verificationimage.php?<?php echo rand(0,9999);?>" alt="verification image, type it in the box" width="50" height="24" />
            <span class="empty">*Dies ist ein Pflichtfeld.</span>
        </label>
        <div class="buttons-wrapper"><a class="link1" data-type="submit">Senden<img class="img-pad1" alt="" src="http://www.html.de/images/link1-marker.png"></a><a class="link1" data-type="reset">Zurücksetzen<img class="img-pad1" alt="" src="http://www.html.de/images/link1-marker.png"></a></div>
    </div>
    </fieldset>
</form>
 
Werbung:
forms.js
Code: 
//forms
;(function($){
    $.fn.forms=function(o){
        return this.each(function(){
            var th=$(this)
                ,_=th.data('forms')||{
                    errorCl:'error',
                    emptyCl:'empty',
                    invalidCl:'invalid',
                    notRequiredCl:'notRequired',
                    successCl:'success',
                    successShow:'4000',
                    mailHandlerURL:'mailer.php',
                    ownerEmail:'[email protected]',
                    stripHTML:true,
                    smtpMailServer:'localhost',
                    targets:'input,textarea',
                    controls:'a[data-type=reset],a[data-type=submit]',
                    validate:true,
                    rx:{
                        ".vorname":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
                        ".nachname":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
                        ".unternehmen":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
                        ".anzahl":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
                         ".email":{rx:/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i,target:'input'},
                    },
                    preFu:function(){
                        _.labels.each(function(){
                            var label=$(this),
                                inp=$(_.targets,this),
                                defVal=inp.val(),
                                trueVal=(function(){
                                            var  tmp=inp.is('input')?(tmp=label.html().match(/value=['"](.+?)['"].+/),!!tmp&&!!tmp[1]&&tmp[1]):inp.html()
                                            return defVal==''?defVal:tmp
                                        })()
                            trueVal!=defVal
                                &&inp.val(defVal=trueVal||defVal)
                            label.data({defVal:defVal})                                
                            inp
                                .bind('focus',function(){
                                    inp.val()==defVal
                                        &&(inp.val(''),_.hideEmptyFu(label),label.removeClass(_.invalidCl))
                                })
                                .bind('blur',function(){
                                    _.validateFu(label)
                                    if(_.isEmpty(label))
                                        inp.val(defVal)
                                         ,_.hideErrorFu(label.removeClass(_.invalidCl))                                             
                                })
                                .bind('keyup',function(){
                                    label.hasClass(_.invalidCl)
                                        &&_.validateFu(label)
                                })
                            label.find('.'+_.errorCl+',.'+_.emptyCl).css({display:'block'}).hide()
                        })
                        _.success=$('.'+_.successCl,_.form).hide()
                    },
                    isRequired:function(el){                            
                        return !el.hasClass(_.notRequiredCl)
                    },
                    isValid:function(el){                            
                        var ret=true
                        $.each(_.rx,function(k,d){
                            if(el.is(k))
                                ret=d.rx.test(el.find(d.target).val())                                        
                        })
                        return ret                            
                    },
                    isEmpty:function(el){
                        var tmp
                        return (tmp=el.find(_.targets).val())==''||tmp==el.data('defVal')
                    },
                    validateFu:function(el){                            
                        el.each(function(){
                            var th=$(this)
                                ,req=_.isRequired(th)
                                ,empty=_.isEmpty(th)
                                ,valid=_.isValid(th)                                
                            
                            if(empty&&req)
                                _.showEmptyFu(th.addClass(_.invalidCl))
                            else
                                _.hideEmptyFu(th.removeClass(_.invalidCl))
                            
                            if(!empty)
                                if(valid)
                                    _.hideErrorFu(th.removeClass(_.invalidCl))
                                else
                                    _.showErrorFu(th.addClass(_.invalidCl))                                
                        })
                    },
                    getValFromLabel:function(label){
                        var val=$('input,textarea',label).val()
                            ,defVal=label.data('defVal')                                
                        return label.length?val==defVal?'nope':val:'nope'
                    }
                    ,submitFu:function(){
                        _.validateFu(_.labels)                            
                        if(!_.form.has('.'+_.invalidCl).length)
                            $.ajax({
                                type: "POST",
                                url:_.mailHandlerURL,
                                data:{
                                    vorname:_.getValFromLabel($('.vorname',_.form)),
                                    nachname:_.getValFromLabel($('.nachname',_.form)),
                                    unternehmen:_.getValFromLabel($('.unternehmen',_.form)),
                                    strasse:_.getValFromLabel($('.strasse',_.form)),
                                    ort:_.getValFromLabel($('.ort',_.form)),
                                    email:_.getValFromLabel($('.email',_.form)),
                                    anzahl:_.getValFromLabel($('.anzahl',_.form)),
                                    telefon:_.getValFromLabel($('.telefon',_.form)),
                                    webseite:_.getValFromLabel($('.webseite',_.form)),
                                    verif_box:_.getValFromLabel($('.verif_box',_.form)),
                                    bemerkung:_.getValFromLabel($('.bemerkung',_.form)),
                                    owner_email:_.ownerEmail,
                                    stripHTML:_.stripHTML
                                },
                                success: function(){
                                    _.showFu()
                                }
                            })            
                    },
                    showFu:function(){
                        _.success.slideDown(function(){
                            setTimeout(function(){
                                _.success.slideUp()
                                _.form.trigger('reset')
                            },_.successShow)
                        })
                    },
                    controlsFu:function(){
                        $(_.controls,_.form).each(function(){
                            var th=$(this)
                            th
                                .bind('click',function(){
                                    _.form.trigger(th.data('type'))
                                    return false
                                })
                        })
                    },
                    showErrorFu:function(label){
                        label.find('.'+_.errorCl).slideDown()
                    },
                    hideErrorFu:function(label){
                        label.find('.'+_.errorCl).slideUp()
                    },
                    showEmptyFu:function(label){
                        label.find('.'+_.emptyCl).slideDown()
                        _.hideErrorFu(label)
                    },
                    hideEmptyFu:function(label){
                        label.find('.'+_.emptyCl).slideUp()
                    },
                    init:function(){
                        _.form=_.me                        
                        _.labels=$('label',_.form)

                        _.preFu()
                        
                        _.controlsFu()
                                                        
                        _.form
                            .bind('submit',function(){
                                if(_.validate)
                                    _.submitFu()
                                else
                                    _.form[0].submit()
                                return false
                            })
                            .bind('reset',function(){
                                _.labels.removeClass(_.invalidCl)                                    
                                _.labels.each(function(){
                                    var th=$(this)
                                    _.hideErrorFu(th)
                                    _.hideEmptyFu(th)
                                })
                            })
                        _.form.trigger('reset')
                    }
                }
            _.me||_.init(_.me=th.data({forms:_}))
            typeof o=='object'
                &&$.extend(_,o)
        })
    }
})(jQuery)
$(window).load(function(){
    $('#pro_contact-form').forms({
        ownerEmail:'[email protected]'
    })
    $('#message_form').forms({
        ownerEmail:'[email protected]'
    })
})
 
mailer.php
PHP: 
<?php
// ----------------------------------------- 
//  The Web Help .com
// ----------------------------------------- 
// remember to replace [email protected] with your own email address lower in this code.

// load the variables form address bar
$vorname = $_POST["vorname"];
$nachname = $_POST["nachname"];
$unternehmen = $_POST["unternehmen"];
$strasse = $_POST["strasse"];
$ort = $_POST["ort"];
$anzahl = $_POST["anzahl"];
$email = $_POST["email"];
$telefon = $_POST["telefon"];
$webseite = $_POST["webseite"];
$bemerkung = $_POST["bemerkung"];
$verif_box = $_POST["verif_box"];

// remove the backslashes that normally appears when entering " or '
$bemerkung = stripslashes($bemerkung); 
$email = stripslashes($email); 


// check to see if verificaton code was correct
if(md5($verif_box).'a4xn' == $_COOKIE['tntcon']){
    // if verification code was correct send the message and show this page
    $nachricht_intern = '
Kontaktformular:
Vorname:        '.$_POST['vorname'].'
Nachname:       '.$_POST['nachname'].'
Unternehmen:    '.$_POST['unternehmen'].'
Straße:         '.$_POST['strasse'].'
PLZ/Ort:        '.$_POST['ort'].'
Anzahl Tische:  '.$_POST['anzahl'].'
Email:          '.$_POST['email'].'
Telefon:        '.$_POST['telefon'].'
Webseite:       '.$_POST['webseite'].'

Weitere Bemerkung:
'.$_POST['bemerkung'].'
';
 
    
    mail("[email protected]", 'Websiten-Anfrage', $nachricht_intern, "From: $email");
    // delete the cookie so it cannot sent again by refreshing this page
    setcookie('tntcon','');
}
?>
 
Werbung:
Ich würde dir auf jeden Fall raten, auch eine Überprüfung mit PHP einzubauen, damit bei deaktiviertem JavaScript nicht ein leeres Formular gesendet werden kann.

Mit JS kenne ich mich nicht wirklich gut aus, aber müsste die CSS Klassen "pflicht" nicht in dem JavaScript Code irgendwo angesprochen werden, damit das Script weiß, was die Pflichtfelder sind?
 
Hi,

nach einem kleinen Mittagsschlaf kamen mir 2 Ideen :)
Eine hat das Problem behoben.
für irgendetwas musste ja diese config nürtzlich sein "notRequiredCl:'notRequired',"

Erster versuch hat nicht geklappt.
HTML: 
<label class="strasse">      
<input type="text" value="Straße:" id="strasse">
<span class="clear"></span>
<span class="notrequired"></span> 
</label>

das 2. hat dann geklappt :)

HTML: 
<label class="strasse notrequired">      
<input type="text" value="Straße:" id="strasse">
<span class="clear"></span>
</label>

Was so ein schläfchen bewirkt... =)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben