Question

Update..

code works now

had to change the validation statement on form submit. Removed the valid vars etc etc. but it works now Thanks

fixed onsubmit to

$('form').on("submit", function(e) {

            //Prevent default
            e.preventDefault();

                    if(validateName() & validateSubject() & validateEmail() & validateMessage())
                    {
                        $('form #status').removeClass().addClass('processing').html('Processing...').fadeIn('fast');

                        // maak variable met alle data die verstuurd kan worden
                        var formData = $('form').serialize();

                        //functie om data naar server te sturen
                        submitForm(formData);
                        return true;
                    }

                    else
                    {
                        $('form #status').removeClass().addClass('error')
                            .html('<strong>Form is not filled in correctly</strong>').fadeIn('fast')
                        return false;
                    }

            });

Answer 1

Your problem is that you aren’t preventing the submission of your form. Instead, you’re hooking into the Submit button and then just showing an error message if there’s a problem (but the form gets submitted anyway so the error message isn’t helpful).

There are a couple things you could/should do to solve this. First of all, you probably want to attach your validation code to the form’s submit event (rather than the submit button’s click event). This will ensure that if you offer other ways to submit the form in the future you won’t need to maintain the validation hooks on each method individually. So instead of:

$('form #submit').click(function(e) {

You probably want:

$('form').on("submit", function(e) {

Secondarily, if there’s a problem with the form, you want to return false in the submit handler. This will cause an implicit e.preventDefault(), which will stop the form from submitting:

if (valid != '') {
    $('form #status').removeClass().addClass('error')
        .html('<strong>Correct these errors<BR></strong>' + valid).fadeIn('fast');
    return false; //stop form submission
    //Or you could do e.preventDefault(); if you're not ready to end the function yet.
}

That should resolve your most immediate issue. Keep at it!