Jquery表单插件（添加ajax表单验证）

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.

我正在创建一个通过Jquery表单插件提交的注册表单。我试图通过带有后端php文件的ajax验证表单字段。这是我的Javascript。它只有在我将其设置为返回false时才会起作用,无论它是什么,否则它会在没有验证的情况下提交它,如果我将其返回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. [e-mail].)");
        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. [e-mail].)");
            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'.

如果遇到问题,php文件会回复某些关键字或字母。如果它顺利运行它回声'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.

正如我上面所说,我需要它在数据等于y时返回true,但事实并非如此。它验证的唯一方法是,如果我保留第二行到最后一行“return false;”否则它提交过我的php后端。我没有遇到if(!var [0]){}函数的任何问题,所以这不是问题。

Any suggestions?

2 个解决方案

#1

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

您可以查看jQuery Validator插件,它为您提供了许多验证选项,包括AJAX调用。

#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.

这是因为您使用validate函数就好像它是同步操作一样。但是.get方法是异步的,意味着函数不会等待xhr方法返回,而是总是会丢失并返回false。您可以使用.ajax方法调用并将其标记为异步:false然而这是不好的,因为它为用户锁定了ui,如果由于某种原因xhr无法返回,则客户端浏览器将无效,除非您取消通过xhr超时调用 - 但这种方法不是我建议的。

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.

正如nickf试图使用validate插件一样。作者提到了synchronus ajax验证的复杂性以及插件如何帮助您避免担心它。

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.

Ajax有助于缩小差距,但在表单提交上同步验证并不是一件容易的事。验证插件使其像纯客户端验证一样简单。您需要做的就是为字段指定规则“re​​mote”,并提供指向处理验证的服务器端资源的参数。