idejong
idejong

Reputation: 111

JQuery working on jsfiddle but not on my server

I have this simple script that validates some inputs and shows error messages. Here is my JSFiddle http://jsfiddle.net/2kJVU/

DOM is loaded, script embedded. The code is working partially but the e-mail message is always showing on my website, even if the Email field is filled out correctly. This is my JS:

$(document).ready(function(){
    $('#registreren').click(function(){  
        var Email = $('#Email').val();
        var Postcode =$('#Postcode').val();

        $("#add_err2").html("");

        if(Email == "") {
            $("#add_err2").css({"border-radius":"5px", "background":"#fd7777", "border":"1px solid #ff0000"});
            $("#add_err2").html("Vul a.u.b. een E-mail adres in <br>");
        }
        else if(!validateEmail(Email)){
            //$("#add_err2").css({"border-radius":"5px", "background":"#ff4e4e", "border":"1px solid #ff0000"});
            $("#add_err2").append("Vul a.u.b. een geldig E-mail adres in <br>");
        }

        if(Postcode == "") {
            //$("#add_err2").css({"border-radius":"5px", "background":"#ff4e4e", "border":"1px solid #ff0000"});
            $("#add_err2").append("Vul a.u.b. een Postcode in <br>");
        }
        else if(Postcode.length < 4){
            //$("#add_err2").css({"border-radius":"5px", "background":"ff4e4e", "border":"1px solid #ff0000"});
            $("#add_err2").append("Vul a.u.b. een geldige Postcode in <br>");
        } else {
            // send backend service;
            $.ajax({
                type: "POST",
                url: "./postcodecheck.php",
                data: "registreren=true&Email="+Email+"&Postcode="+Postcode,
                success: function(html){    
                    if(html=='true')    {
                        $("#add_err2").hide();
                        window.location="./registreren.php";
                    }
                    else    {
                        $("#add_err2").css({"border-radius":"5px", "background":"#496999", "border":"1px solid #174385", "width":"350px;", "color":"#ffffff"});
                        $("#add_err2").html("Helaas is BoxCloud nog niet beschikbaar in uw regio. Als u op de hoogte wilt blijven van nieuwe regio’s, meld u dan a.u.b. via de onderstaande balk aan voor de nieuwsbrief van BoxCloud");
                    }
                },
            });
            function validateEmail(email) {
                var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
                return re.test(email);
            }
            return false;
        };
    });
});

HTML:

<form id="klant_worden" action="" method="POST">
    <fieldset id="inputs">
        <input id="Email" type="email" name="Email" class="inputs" placeholder="Uw e-mail adres">
        <input id="Postcode" type="text" name="Postcode" class="inputs" placeholder="Uw postcode (1234AB)">
        <!-- <input type="submit" class="submitclient" id="registreren" value="Registreren" name="registreren" onclick="validateForm();"> -->
        <input type="button" class="submitclient" id="registreren" value="Registreren" name="registreren">
    </fieldset>
</form>

<section class="err" id="add_err2"><br></section>

This is working fine there but not on my server. Why?

EDIT:

Live version can be found here(first signup box): http://www.boxcloud.nl/site/

Upvotes: 0

Views: 119

Answers (1)

Nikhil Talreja
Nikhil Talreja

Reputation: 2774

Validate email should be outside the else loop: http://jsfiddle.net/2kJVU/3/

$(document).ready(function () {
    $('#registreren').click(function () {
        var Email = $('#Email').val();
        var Postcode = $('#Postcode').val();

        $("#add_err2").html("");

        if (Email === "") {
            $("#add_err2").css({
                "border-radius": "5px",
                    "background": "#fd7777",
                    "border": "1px solid #ff0000"
            });
            $("#add_err2").html("Vul a.u.b. een E-mail adres in <br>");
        } else if (!validateEmail(Email)) {

            $("#add_err2").append("Vul a.u.b. een geldig E-mail adres in <br>");
        }

        if (Postcode === "") {
            $("#add_err2").append("Vul a.u.b. een Postcode in <br>");
        } else if (Postcode.length < 4) {
            $("#add_err2").append("Vul a.u.b. een geldige Postcode in <br>");
        } else {
            // send backend service;
            $.ajax({
                type: "POST",
                url: "./postcodecheck.php",
                data: "registreren=true&Email=" + Email + "&Postcode=" + Postcode,
                success: function (html) {
                    if (html == 'true') {
                        $("#add_err2").hide();
                        window.location = "./registreren.php";
                    } else {
                        $("#add_err2").css({
                            "border-radius": "5px",
                                "background": "#496999",
                                "border": "1px solid #174385",
                                "width": "350px;",
                                "color": "#ffffff"
                        });
                        $("#add_err2").html("Helaas is BoxCloud nog niet beschikbaar in uw regio. Als u op de hoogte wilt blijven van nieuwe regio’s, meld u dan a.u.b. via de onderstaande balk aan voor de nieuwsbrief van BoxCloud");
                    }
                }
            });


        }
    });

    function validateEmail(email) {
        var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return re.test(email);
    }


});

Upvotes: 1

Related Questions