Jquery form plugin (adding ajax form validation)

Question

I am creating a register form that is submitted via the Jquery form plugin. I am attempting to validate the form fields through ajax with a backend php file. Here is my Javascript. It only works if I set it to return false no matter what otherwise it submits it without validating it if I return it true.

$(document).ready(function(){
    $(".close_pop").click(function(){
        $("#rc").fadeOut("slow");
    });

    var options = { 
        target:        '.container',
        beforeSubmit: validate    
    }; 
    $('#register_form_id').submit(function() { 
        // inside event callbacks 'this' is the DOM element so we first 
        // wrap it in a jQuery object and then invoke ajaxSubmit 
        $(this).ajaxSubmit(options); 
        // !!! Important !!! 
        // always return false to prevent standard browser submit and page navigation 
        return false; 
    });
}); 
function validate(formData, jqForm, options) { 
    var fn = $('input[@name=first_name]').fieldValue(); 
    var ln = $('input[@name=last_name]').fieldValue(); 
    var e = $('input[@name=maile]').fieldValue(); 
    var p = $('input[@name=pass]').fieldValue();
    var url = "/register/validate?first=" + fn + "&last=" + ln + "&email=" + e + "&pass=" + p; 
    if (!fn[0]) { 
        $("#fn").focus();
        $(".error").fadeIn("slow");
        $(".error").html("Please enter your first name.");
        return false;
    }
    if (!ln[0]) { 
        $("#ln").focus();
        $(".error").fadeIn("slow");
        $(".error").html("Please enter your last name.");
        return false;
    }
    if (!e[0]) { 
        $("#e").focus();
        $(".error").fadeIn("slow");
        $(".error").html("Please enter a valid email address (e.g. [email protected].)");
        return false;
    }
    if (!p[0]) { 
        $("#p").focus();
        $(".error").fadeIn("slow");
        $(".error").html("Please enter a valid password (It must be at least 6 characters.)");
        return false;
    }       
     $.get(url , 
        function(data){
        if(data == 'ng') {
            $(".error").fadeIn("slow");
            $(".error").html("We are experiencing technical issues. Please try again later.");
            return false;
        } else if(data == 'f') {
            $("#fn").focus();
            $(".error").fadeIn("slow");
            $(".error").html("Please enter your first name.");
            return false;
        } else if(data == 'l') {
            $("#ln").focus();
            $(".error").fadeIn("slow");
            $(".error").html("Please enter your last name.");
            return false;
        } else if(data == 'e') {
            $("#e").focus();
            $(".error").fadeIn("slow");
            $(".error").html("Please enter a valid email address (e.g. [email protected].)");
            return false;
        } else if(data == 'e_u') {
            $("#e").focus();
            $(".error").fadeIn("slow");
            $(".error").html("This email address appears to be registered.");
            alert(data);
            return false;
        } else if(data == 'p') {
            $("#p").focus();
            $(".error").fadeIn("slow");
            $(".error").html("Please enter a valid password (It must be at least 6 characters.)");
            return false;
        } else if(data == 'y') {
            return true;
        } else {
            return false;
        }
      });
      return false;
}

The php file echos certain keywords or letters to say if it had ran into a problem. If it ran smoothly it echos 'y'.

As I stated above I need it to return true when the data is equal to y but it is not. The only way it validates is if I keep the second to last line "return false;" otherwise it submits past my php backend. I am not experiencing any trouble with the if(!var[0]) { } functions so that is not a problem.

Any suggestions?

Answer 1

You could take a look at the jQuery Validator plugin, which gives you many options for validation, including AJAX calls.

Answer 2

This is because your using the validate function as if it is a synchronous operation. However the .get method is asynchronous meaning the function does not wait for the xhr method to return, instead it will always drop through and return false. You could use the .ajax method call and mark it as asynchronous:false however this is bad pratise since it locks up the ui for the user and if for whatever reason the xhr fails to return the client browser will be non functional unless you cancel the call via an xhr timeout - but this method is not something I would advise.

As nickf eluded to try the validate plugin. The author mentions the complexities of of synchronus ajax validation and how the plugin helps you avoid having to worry about it.

Ajax helps to bridge the gap, but synchronizing validation on form submit isn’t exactly an easy task. The validation plugin makes it as simple as pure client-side validation. All you need to do is to specify a rule “remote” for a field and provide a parameter that points to a server-side resource that handles the validation.