0

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;
            }
        }
        });
}
Giang Nguyen
  • 495
  • 8
  • 22
  • You need to escape those single quote marks in the strings for a start: `Email address can\'t be blank`... – Andy Feb 25 '15 at 15:46
  • I read the same article, but i could not understand it. Could you please tell me what is wrong with my above code? – Giang Nguyen Feb 25 '15 at 16:10
  • Could any tell me how to fix my existing code to work? I read the recommended article, tried many time but It still doest work – Giang Nguyen Feb 25 '15 at 16:33
  • The first answer is the easiest. Just create a new function to run when your code is successful. – Andy Feb 25 '15 at 17:04
  • Could you please be more specific? How to fix to code accordingly? Many thanks. I just start learning ajax and those explainations are so advanced. Please help with this particular case. – Giang Nguyen Feb 25 '15 at 17:07
  • I can't do that in these comments. Go back over that duplicate answer page and try to understand it, or look up a tutorial on jQuery AJAX. Sorry. – Andy Feb 25 '15 at 17:21

0 Answers0