CODEWITHSUNDEEP
javascriptjqueryajax
Rohitashv Singhal
Rohitashv Singhal

Reputation: 4557

return false not working in jQuery ajax

I am working on a registration form with jquery ajax. My jQuery Code is as follow : 

function validateData()
{
    var email = jQuery("#email").val();
    var username = jQuery("#username").val();
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;   
    var regex = new RegExp(/^\+?[0-9(),.-]+$/); 
    if(!emailReg.test(email))   
    {
        alert('Please enter valid email');
        return false;   
    }
    var agreement = jQuery("#agereement").is(":checked");
    if(agreement == false)
    {
        alert("Please agree with the agreement !!! ");
        return false;
    }
    var pass = jQuery("#password").val();
    var repass = jQuery("#repeatpass").val();
    if(pass != repass)
    {
        alert("Password & Repeat Password Should be same");
        return false;
    }

        var FirstData = "email=" + email+"&username="+username;
        var url = "ajaxcheck.php";
        jQuery.ajax({
            dataType : 'html',
            type: 'GET',
            url : url,
            data : FirstData,
            complete : function() { },
            success: function(data) 
                {
                    if(data == '')
                    {
                        alert("No Problem");
                        var flag = "true";
                    }
                    else{
                        alert("Username Or Email ID Already Exists");
                        var flag = "false";                     
                    }

                }   
        });
        alert(flag);
        return flag;
}
</script>

When I submit the form and enters the value of username which is already exists in DB then it alerts the Username Or Email ID Already Exists but submit the form instead of staying on the page. What Should I do if it error comes then it should stay on the page instead of submitting the form

Upvotes: 1

Views: 963

Answers (4)

Margus
Margus

Reputation: 20038

I'm trying to help you from another angle.

Here is an example on how to do form validation (with bootstrap/php/jquery): http://formvalidation.io/examples/contact-form/

Ajax ".done" happens when you get a successful response from the server and ".fail" happens when sending a request or receiving the response has failed. Assuming you want to check if email exists then you can use something in the lines of:

if(response.IsEmailValid === 'false')
{
    $('#alertContainer')
        .removeClass('alert-success')
        .addClass('alert-warning')
        .html('Sorry, email has been taken')
        .show()
}

Upvotes: 1

Erik Hesselink
Erik Hesselink

Reputation: 2530

You're setting flag to strings, not boolean values. Try using true and false instead of "true" and "false", both of which are truthy.

Upvotes: 0

Rory O&#39;Kane
Rory O&#39;Kane

Reputation: 30388

When you write:

    var flag = "true";
…
    var flag = "false";
…
return flag;

The problem is that "true" and "false" are strings containing the word “true” or “false”. To get the actual boolean values true or false, get rid of the quotes:

    var flag = true;
…
    var flag = false;
…
return flag;

Event handlers only understand boolean return values, not strings.

Upvotes: 2

Niklesh Raut
Niklesh Raut

Reputation: 34914

Use onsubmit in form tag

<form onsubmit="return validateData();">
 ....
 <input type="submit">
</form>

Upvotes: 1

Related Questions