having problems with landing page

Question

I'm trying to build a landing page with php & js validation - i create the html/php & etc, but the .JS script always hangs on the last "else"... and gives the "123" alert... i debugged it for syntax problem for hundred of time with any online debugging site i know - but it's seems to be something else....

$(document).ready(function(){

    $('form.landing-form').submit(function(){

        var name = $.trim($('input[type="text"].field-name').val());
        var email = $.trim($('input[type="text"].field-email').val());
        var phone = $.trim($('input[type="text"].field-phone').val());

        var nameReg = /^[a-zA-Z ]+$/;
        var emailReg = /^([\w-\.]+@([[\w-]+\.)+[\w-]{2,4})?$/;
        var phoneReg = /^[0-9-+]+$/;

        $('input[type="text"]').removeClass('error');

        if(name.length < 2 || !nameReg.test(name)) {
            $('input[type="text"].field-name').addClass('error');
            $('input[type="text"].field-name').val('');
            $('input[type="text"].field-name').attr('placeholder','*valid name is requierd!');
        } else if (email.length < 5 || !emailReg.test(email)) {
            $('input[type="text"].field-email').addClass('error');
            $('input[type="text"].field-email').val('');
            $('input[type="text"].field-email').attr('placeholder','*email is requierd!');
        } else if (phone.length < 9 || !phoneReg.test(phone)) {
            $('input[type="text"].field-phone').addClass('error');
            $('input[type="text"].field-phone').val('');
            $('input[type="text"].field-phone').attr('placeholder','*phone is requierd!');
        } else {
            $.ajax({
                url: "handler/form_handler.php",
                type : "POST",
                dataType: "html",  
                async: "false",  
                data : { name:name, email:email, phone:phone },
                beforeSend : function () {
                    var messege = '<img src="images/ajax-loader.gif" border="0">';
                    messege += '&nbsp;&nbsp;Sending...';
                    $('form.landing-form label').html(messege);
                },
                success: function(response) {
                    if(response == true){
                        alert('321');
                    } else {
                        alert('123');
                    }
                }
            });
        }
        return false;
    });
});

Any ideas?

Answer 1

I think you're using success the wrong way.

The jquery manual states:

Function( PlainObject data, String textStatus, jqXHR jqXHR )

in other words, there's no boolean returned, but the success message.

Try the following and see what is returned:

success: function(response) {
        alert(response);  /* y no console.log()? */
},
error: function(e) {
        alert(e);
}

From the responses you can figure out what is actually being send, and what error is returned (if any). In case you're not using them, developer tools like firebug will help.

Also, you might want to use === instead of == in comparisons with javascript. (see: this SO-post)