JQuery Validation Plugin:使用自定义Ajax方法

时间:2010-02-03 12:03:35

标签: jquery-plugins jquery jquery-validate

如果可能,请寻求Jquery form validation plugin的一些帮助。

我通过对我的数据库进行ajax调用来验证模板的电子邮件字段,该数据库检查电子邮件字段中的文本当前是否在数据库中。

    // Check email validity on Blur
       $('#sEmail').blur(function(){
       // Grab Email From Form
       var itemValue = $('#sEmail').val();
        // Serialise data for ajax processing
        var emailData = {
            sEmail: itemValue
        }
        // Do Ajax Call
         $.getJSON('http://localhost:8501/ems/trunk/www/cfcs/admin_user_service.cfc?method=getAdminUserEmail&returnFormat=json&queryformat=column', emailData, function(data){

                    if (data != false) {
                        var errorMessage = 'This email address has already been  registered';
                    }
                    else {
                        var errorMessage = 'Good'
                    }
                })
    });

我想做的是将此调用加入到我的JQuery Validation插件的规则中......例如

    $("#setAdminUser").validate({
      rules:{
             sEmail: {
                  required: function(){
                  // Replicate my on blur ajax email call here
                 }                  
             },
            messages:{
                sEmail: {
                    required: "this email already exists"       

            }
        });

想知道是否有实现这个目标?非常感谢

4 个答案:

答案 0 :(得分:15)

你正在做一个AJAX请求,ergo:当你的自定义验证器返回true或false时,验证已经完成。

您需要使用异步。另请参阅此帖子:How can I get jQuery to perform a synchronous, rather than asynchronous, Ajax request?

让我们说我们有一个自定义验证来检查Unique Mobile,所以我们将添加一个新方法,以检查unqiue Mobile no:

jQuery.validator.addMethod("uniqueMobile", function(value, element) {
    var response;
    $.ajax({
        type: "POST",
        url: <YOUR SERVER SCRIPT/METHOD>,
        data:"mobile="+value,
        async:false,
        success:function(data){
            response = data;
        }
    });
    if(response == 0)
    {
        return true;
    }
    else if(response == 1)
    {
        return false;
    }
    else if(response == 'logout')
    {
        return false;
    }
}, "Mobile is Already Taken");

答案 1 :(得分:1)

您可以添加像这样的自定义验证方法

 $.validator.addMethod('unique',
                     function(value) {
        $.get('http://localhost:8501/ems/trunk/www/cfcs/admin_user_service.cfc','?method=getAdminUserEmail&returnFormat=json&queryformat=column&emailData='+ value,
                            function(return_data) {
                                return return_data;
                            })
                         }
                         , "this email already exists"
                    );

然后将unique类添加到您的电子邮件字段中,或者您可以使用类似

的内容
$.validator.addClassRules("unique-email", {
                unique: true
            });

答案 2 :(得分:1)

试试这个:

$.validator.addMethod('unique', 
            function(value) {
         var result = $.ajax({ 
                             async:false, 
                             url:"http://yoursamedomain.com/checkemail",
                             data:'email='+ value, 
                             dataType:"text" }); 

         if(result .responseText) return true; else return false;

             } , "This email address has already been  registered");

答案 3 :(得分:0)

对于服务器端AJAX验证,请使用remote规则。这与标准的jQuery AJAX请求对象相同。您的服务器必须返回字符串“true”表示有效值或“false”表示无效,也可以传递一些字符串“此电子邮件已被删除”,这将被视为无效,并呈现为错误消息:

$( "#myform" ).validate({
  rules: {
    email: {
      required: true,
      email: true,
      remote: {
        url: "check-email.php",
        type: "post",
        data: {
          username: function() {
            return $( "#username" ).val();
          }
        }
      }
    }
  }
});

在此处阅读文档remote-method