使用jQuery问题验证和提交表单

Question

I'm trying to submit form using j-query, before submitting it should do some validation and in that I've validation for capcha using ajax. Everything works fine without ajax validation.

<form id="RegistrationForm" name="RegistrationForm" method="post" action="save.php" >

jquery code

$('#RegistrationForm').submit(function(){
//some validation goes here
if($('#captcha').val() != '')
    { 
        var captcha = $('#captcha').val();
        $.ajax({
            url:'validate.php',
            type:'POST',
            data:{captcha:captcha},
            success: function(data){
                if(data == 'false')
                {
                    alert('Wrong Captcha is typed!');
                    return false;
                }
                else
                {
                                alert('enter');
                document.getElementById("RegistrationForm").submit();   
                                return true;

                }

              }
            });
    }
});`

while submitting form it shows alert "enter" but form not getting submitted. Thanks in advance.

Answer 1

You probably need to change your variable to a JSON seening how you are retreiving from a php. if thats not the solution try

if (data){

}else{

}

FYI this is not jquery validation. Jquery validation is a library set up in order to make sure the proper fields are set up correctly before submitting. What you have done is tested if the captcha is correct after submitting.

Answer 2

try something like this

        $(function(){
            $('#RegistrationForm').submit(function(){
                if($('#captcha').val() != ''){ 
                    var captcha = $('#captcha').val();
                    $.ajax({
                        url:'validate.php',
                        type:'POST',
                        async:false,
                        data:{captcha:captcha},
                        success: function(response){
                            if(response == 'false')
                            {
                                alert('Wrong Captcha is typed!');
                                return false;
                            }
                            else
                            {
                                alert('enter');
                                return true;

                            }

                      }
                  });
                }
            });`

        })

Answer 3

Try making ajax synchronous

 $.ajax({
        url:'validate.php',
        type:'POST',
        async: false,
        data:{captcha:captcha},
        success: function(data){
            if(data == 'false')
            {
                alert('Wrong Captcha is typed!');
                return false;
            }
            else
            {
                            alert('enter');
            document.getElementById("RegistrationForm").submit();   
                            return true;

            }

          }
        });

Answer 4

I think the problem is when the ajax request returns other value than false , every time you are again calling from submit , i think every time it calls to submit function , but could not submit successfully . because it calls submit function recursively.

try

$('#RegistrationForm').submit(function(){
//some validation goes here
if($('#captcha').val() != '')
    { 
        var captcha = $('#captcha').val();
        $.ajax({
            url:'validate.php',
            type:'POST',
            data:{captcha:captcha},
            success: function(data){
                if(data == 'false')
                {
                    alert('Wrong Captcha is typed!');
                    return false;
                }
                else
                {
                     alert('enter');   
                }

              }
            });
    }
});