Jquery ajax form not loading

Question

I am trying to make the jquery ajax submit a form validation for me, but it seems like its not even loading, the top jquery doesnt do anything after adding the validateFields so i must have a error somewhere, but i cant seem to find it.

Here is my code:

            $(document).ready(function () {
$( "#Bottom" ).delay(1000).slideDown( "slow" );

$( "#SuC" ).click(function() {
    $( "#Wrap" ).fadeOut( "slow" , function() {
        $( "#WrapSu" ).fadeIn( "slow" , function() {
            $( "#WrapSu #Bottom" ).delay(1000).slideDown( "slow" )});
    });
});

function validateFields() {

    var fname = $("input#fname").val();
    if (fname == "") {
        $( "#WrapSu" ).css({"border-radius":"0px 0px 3px 3px"});
        $( "#Fejl" ).html("<p class=\"c\">First name missing!</p>");
        $( "#Fejl" ).slideDown( "slow" );
        return false;
    }

    var lname = $("input#lname").val();
    if (lname == "") {
        $( "#WrapSu" ).css({"border-radius":"0px 0px 3px 3px"});
        $( "#Fejl" ).html("<p class=\"c\">Last name missing!</p>");
        $( "#Fejl" ).slideDown( "slow" );
        return false;
    }

    var femail = $("input#femail").val();
    if (femail == "") {
        $( "#WrapSu" ).css({"border-radius":"0px 0px 3px 3px"});
        $( "#Fejl" ).html("<p class=\"c\">Email missing!</p>");
        $( "#Fejl" ).slideDown( "slow" );
        return false;
    }

    var lemail = $("input#lemail").val();
    if (lemail == "") {
        $( "#WrapSu" ).css({"border-radius":"0px 0px 3px 3px"});

        $( "#Fejl" ).html("<p class=\"c\">Email missing!</p>");
        $( "#Fejl" ).slideDown( "slow" );
        return false;
    }

    var cemail = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
    if (femail !== "") {
        $( "#WrapSu" ).css({"border-radius":"0px 0px 3px 3px"});
        if(!cemail.test(femail)){
            $( "#Fejl" ).html("<p class=\"c\">Your email is invalid.</p>");
            $( "#Fejl" ).slideDown( "slow" );
            return false;
        }
    }

    var fpassword = $("input#fpassword").val();
    if (fpassword == "") {
        $( "#WrapSu" ).css({"border-radius":"0px 0px 3px 3px"});
        $( "#Fejl" ).html("<p class=\"c\">Password missing!</p>");
        $( "#Fejl" ).slideDown( "slow" );
        return false;
    }

    var lpassword = $("input#lpassword").val();
    if (lpassword == "") {
        $( "#WrapSu" ).css({"border-radius":"0px 0px 3px 3px"});
        $( "#Fejl" ).html("<p class=\"c\">Confirm password!</p>");
        $( "#Fejl" ).slideDown( "slow" );
        return false;
    }

     var datastring = 'fname='+ fname +'&lname='+ lname +'&email='+ femail +'&password='+ fpassword;

    $.ajax({
        type: "POST",
        url: "opret.php",
        data: dataString,
        success: function() {
            if(responseText == 1) {
                $( "#Fejl" ).html("<p class=\"c\">virker</p>");
            } else { // else blank response
                $( "#Fejl" ).html("<p class=\"c\">virker2</p>");
            }
        }
    });
    return false;
};
    $('form#opret').on('submit',function(e) {
    e.preventDefault();
    var success=validateFields();
});

}); I hope someone knows it, and could kindly explain to me whats causing this. thanks

edit: html code

                <form name="contact" id="opret" action="">
                <div id="Top">
                    <input type="text" name="name" id="fname" value="First Name" class="f">
                    <input type="text" name="name" id="lname" value="Last Name" class="s">
                    <input type="text" name="name" id="femail" value="Email" class="f">
                    <input type="text" name="name" id="lemail" value="Repeat Email" class="s">
                    <input type="text" name="name" id="fpassword" value="Password" class="f">
                    <input type="text" name="name" id="lpassword" value="Confirm Password" class="s">
                    <p class="c">You are required to fill all fields, and after signing up you will need to activate you account ( email will be sent with the instructions ).</p>
                </div>
                <div id="Bottom">
                    <button type="button" id="SignUpb">Sign up</button>
                </div>
            </form>

Answer 1

It looks like you have double quotes inside of double quotes on the lines that actually display the validation:

$( "#Fejl" ).html("<p class="c">Email missing!</p>");

Do you use chrome/firefox? Open up the inspector, run the code, and look at what errors you see in the console.

Edit:

Here's the fixed version:

http://jsfiddle.net/2teq3/2/

you also don't need the trailing ');' after your validateFields function.