I have a form for user to register new account. I tried to implement jquery + ajax to check email availability. I used e.preventDefault(); to prevent form submission if there is any error with user's input. Even ajax response is return false (means that email is already existed in database). But It still allows form submission. It should shows up this error: "This email address is already existed. Please choose another one". Please anyone tell me what is wrong with my jquery code? Thank you very much...!
Here is my form:
<form role="form" method="post" id="signupForm" action="index.php?view=signup-gv">
<div class="col-xs-6 border-right">
<div class="form-group">
<label for="exampleInputEmail1">Full Name</label>
<input type="text" class="form-control" id="regname" name="regname" placeholder="Full Name">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email Address</label><span id="emailcheck"></span>
<input type="email" class="form-control" id="regemail" name="regemail" placeholder="Enter email">
</div>
</div>
<div class="form-group col-xs-6">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="regpass" name="regpass" placeholder="Password">
</div>
<button style="position:relative; left: 15px; top: 10px;" class="btn btn-default" name="register" id="register">Register</button>
</form>
Here is my jquery + Ajax code:
$(document).ready(function(){
$('#regname').focus();
$('#regemail').blur(emailCheck);
$('#signupForm').submit(function(e) {
var regname = $('#regname');
var regemail = $('#regemail');
var regpass = $('#regpass');
var register_result = $('#register_result');
register_result.html('Loading..');
if(regname.val() == ''){
regname.focus();
register_result.html('<span class="errorss"> * Full name can't be blank</span>');
e.preventDefault();
}
else if ($.trim(regemail.val()).length == 0) {
regemail.focus();
register_result.html('<span class="errorss">* Email address can't be blank</span>');
e.preventDefault();
}
else if (emailCheck()==false) {
regemail.focus();
register_result.html('<span class="errorss"> This email address is already existed. Please choose another one </span>');
e.preventDefault();
}
else if(regpass.val() == ''){
regpass.focus();
register_result.html('<span class="errorss">* Password can't be blank</span>');
e.preventDefault();
}
});
});
function emailCheck() {
var regemail = $('#regemail');
var emailcheck = $('#emailcheck');
emailcheck.html('');
var UrlToPass = {regemail:regemail.val()} ;
$.ajax({
type : 'POST',
cache: false,
data : UrlToPass,
url : 'emailcheck.php',
success: function(responseText){
if(responseText == 0){
return true;
}
else{
emailcheck.html('<span class="errorss"> This email is existed.</span>');
return false;
}
}
});
}