Reputation: 111
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
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