javascript - I need help on js and jquery form validation

Question

i have problem with this query when i fill my email box with correct email it can validate and then ask me correct email and when i change my email box to empty it shows me correct email address. let check this http://www.icodecrew.com/register

             if(email == "") {
        $("span.val_email").html("Please Enter Your Correct Email-ID.").addClass('validate');
        validation_holder = 1;
    } else { 
        if(!email_regex.test(email)){ // if invalid email
            $("span.val_email").html("Invalid Email!").addClass('validate');
            validation_holder = 1;
        } else {
  $("span.val_email").html("");

                 $(document).ready(function(){
        $("#email").change(function(){

             $("span.val_email").html("<img src='spinner.gif' /> Please wait until we check...");


        var email=$("#email").val();

          $.ajax({
                type:"POST",
                url:"includes/checkemail.php",
                data:"email="+email,
                    success:function(data){
                    if(data==0){
                        $("span.val_email").html("<img src='accept.png' title='available' />");
                    }
                    else{
                        $("span.val_email").html("<img src='error.png' /> E-Mail is Already registered");
                    }
                }
             });

        });

     }); 
        }
    }

Answer 1

正如@PlantTheldea 在对您问题的评论中提到的那样，您的操作顺序被严重破坏。通读您的代码后，这是我认为您想要的最接近的。它未经测试，仅用于帮助您确定执行步骤的顺序：

$(function () {
    var email_input = $('#email');

    email_input.change(function () {
        var status_display = $('span.val_email'),
            email = email_input.val();

        if (email === '') {
            status_display
                .html('Please Enter Your Correct Email-ID.')
                .addClass('validate');

            validation_holder = 1;
        } else { 
            if (!email_regex.test(email)) {
                status_display
                    .html('Invalid Email!')
                    .addClass('validate');

                validation_holder = 1;
            } else {
                status_display
                    .html('<img src="spinner.gif" /> Please wait until we check...')
                    .removeClass('validate');

                $.ajax({
                    type: 'POST',
                    url: 'includes/checkemail.php',
                    data: {
                        email: email
                    },
                    success: function (data) {
                        if (data == 0){
                            status_display.html('<img src="accept.png" title="available" />');
                        } else {
                            status_display.html('<img src="error.png" /> E-Mail is Already registered');
                        }
                    }
                });
            }
        }
    });
});