jquery form validation .submit() doet het niet

[Verwijderd]

Beste tweakers,
Bij het programmeren van de inlogpagina van mijn site ben ik tegen het volgende voorval gebotst:
De jquery client-side form validation (om te checken of alle velden ingevuld zijn etc) lukt perfect, maar het formulier wil maar niet verzonden worden.

JavaScript:

// JavaScript Document
$(document).ready(function(){
        $("#login_submit").click(function(e){
                e.preventDefault();
                //clearing all error spans
                $("span.error_span").html("");
                //getting the values of the input
                var input_email=$("#email").val();
                var input_password=$("#password").val();
                
                //setting the validation parameter to true. if an error has occured, it will be set as 'false';
                var login_verification=true;
                
                
                //checking if email is empty
                if( !$("#email").val() ) {
                     //email is not set
                    var login_verification=false;
                    //setting extra var to see if you have to echo that the email isn't valid. If this var is true, no email validation is needed
                    var input_email_empty=true;
                    $("#email_span").append("Dit veld mag je niet leeg laten");
                } else {
                    //email is set
                }
                
                //checking if password is empty
                if( !$("#password").val() ) {
                     //password is not set
                     var login_verification=false;
                     $("#password_span").append("Dit veld mag je niet leeg laten");
                } else {
                    //password is set
                    
                }
                
                //validating email adres
                function is_valid_email(emailAddress) {
    var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
    return pattern.test(emailAddress);
};
            //checking if email field is empty. If so, no valiation is needed
            
            if(input_email_empty==true){
                // the email is empty, no validation needed.
            } else {
                
                if(is_valid_email(input_email)){
                    //email is valid
                    
                } else {
                    //no valid email
                    var login_verification=false;
                    
                    $("#email_span").append("Dit is geen geldig e-mailadres");
                }
            
            }
                
                
                if(login_verification==true){
                    //the login is ok   
                    alert("the form will be sended");
                    $("#login_form").submit();
                    alert(" the form has been sended");
                    
                }
        });
    
});

Zoals jullie zien staat er boven de .submit regel een alert, en eronder ook. Beide worden weergegeven, alleen wordt het formulier nog altijd niet verzonden.

Weet iemand wat ik over het hoofd gezien heb? Alvast bedankt

[ Voor 0% gewijzigd door BtM909 op 16-05-2013 11:58 ]

[windwarrior]

Wat beteft je probleem, hoe weet je zeker dat er niet gesubmit wordt?

Overigens, je kan aldus de docs ook je submit omdraaien door een handler aan je submit button te knopen, en als die handler true returnt dan wordt er echt gesubmit en anders niet. Dat lijkt me een deftigere oplossing.

[HuHu]

Schoon sowieso je code eens op door de lege else-clauses weg te halen. E-mailadres validatie met een regex is ook vrijwel onmogelijk en kun je beter niet doen.

En een gokje: die alerts rondom de .submit() zie je wel?

[Verwijderd]

@huhu, ja hoor, dat is het juist, ik krijg beiden perfect.

[lordsnow]

the form will be sended
the form has been sended


Dude...

[Daos]

lordsnow schreef op zondag 12 mei 2013 @ 22:31:
the form will be sended
the form has been sended


Dude...

The Big Lebowski is inderdaad een vette film.

Of bedoelde je de spelfout? Send is een onregelmatig werkwoord. Verleden en voltooid is "sent".


Hoort dit topic trouwens niet bij de buren van /13? Daar zitten de mensen met verstand van html/javascript en dergelijke.

[crisp]

Zonder het bijbehorende formulier is het glazen-bol werk. De meest voorkomende fout is overigens name=submit gebruiken voor een form-element waardoor de submit method van het formulier niet meer toegankelijk is binnen JS, maar daar zou je sowieso een JS error op moeten krijgen.

Verder zie de comment van windwarrior; voor client-side form validation gebruik je het beste het submit event van het formulier in plaats van onclick op een button.

En bij deze meteen een schopje naar Webdesign, Markup & Clientside Scripting

[ Voor 10% gewijzigd door crisp op 12-05-2013 23:19 ]

[_Thanatos_]

Even buiten de andere net-niet-netjesheden om, de event handler op de click van een button zetten is af te raden. De gebruiker kan het formulier ook submitten door op enter te drukken, of met een autofill-functie van de browser. Je moet het submit-event van het form afvangen (en false returnen in jouw geval).

That said, we hebben een jsfiddle nodig, denk ik