JQuery远程验证(不阻止表单提交)

时间:2013-11-08 09:09:23

标签: jquery jquery-validate

我面临以下问题。在注册表单中,如果已经使用了给定的用户名,它会尝试远程检查。 这很好用,如果用户名已被使用,我添加错误类工作正常。 问题是,即使用户名已被使用,您仍然可以提交注册表单。远程验证不应该阻止吗?

这是我的验证码。

var validator = $('#register').validate({
    rules: {
        registerUsername: {

            required: true,
            remote: {
            type: 'post',
            url: 'includes/CheckUsername',
            data: {
                username: function() {
                    return $('#registerUsername').val()
                }
            },
            complete: function(data){
                  if( data.responseText != "found" ) {
                      $('#regUsernameGroup').addClass('has-error').removeClass('has-success');
                      return false;
                  }
                  else{
                      $('#regUsernameGroup').removeClass('has-error').addClass('has-success');
                  }
                }
            }
        },
        registerEmail: {
            required: true
        },
        registerPassword: {
            required: true
        }
    },
    messages: {
        registerUsername: {remote: 'tzuwertzut',required: 'asdasd'},
        registerEmail: "",
        registerPassword: ""
    },
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
    }

});
$('#myModal').on('hidden.bs.modal', function () {
  validator.resetForm();
  $('#regEmailGroup').removeClass('has-error').removeClass('has-success');
  $('#regUsernameGroup').removeClass('has-error').removeClass('has-success');
  $('#regPassGroup').removeClass('has-error').removeClass('has-success');

});

任何提示都将不胜感激。

1 个答案:

答案 0 :(得分:1)

参考the documentation for the remote method

  

选项
  这些选项深度扩展默认值dataType:"json", data:{nameOfTheElement:valueOfTheElement})。 您提供的任何选项都将覆盖默认值。   

和...

  

响应评估为JSON,必须为true有效元素,   并且可以是任何falseundefinednull无效元素,使用   默认消息;或者一个字符串,例如。 “这个名字已经被拿走了,试试吧   peter123而不是“显示为错误消息。

上面的“响应”一词是指服务器端代码的响应


现在让我们检查您的代码:

remote: {
    type: 'post',
    url: 'includes/CheckUsername',
    data: {
        username: function () {
            return $('#registerUsername').val()
        }
    },
    complete: function (data) {
        if (data.responseText != "found") {
            $('#regUsernameGroup').addClass('has-error').removeClass('has-success');
            return false;
        } else {
            $('#regUsernameGroup').removeClass('has-error').addClass('has-success');
        }
    }
}

关于data:

的使用情况
data: {
    username: function () {
        return $('#registerUsername').val()
    }
}

根据上面引用的文档,data选项的默认值已经是nameOfTheElement: valueOfTheElement,因此您根本不需要在此处覆盖它。您的语法没有任何问题,但只有当您还必须从其他字段发送数据以及remote定位的字段中的数据时,才需要此选项; 示例 - 您正在使用remote检查用户名字段,但您需要发送电子邮件地址字段。

关于complete:

的使用情况
complete: function (data) {
    if (data.responseText != "found") {
        $('#regUsernameGroup').addClass('has-error').removeClass('has-success');
        return false;
    } else {
        $('#regUsernameGroup').removeClass('has-error').addClass('has-success');
    }
}

您无需指定.addClass('has-error').removeClass('has-success').removeClass('has-error').addClass('has-success')。当remote规则接收通过/失败状态时,正确地自动发生类的正确应用

您的逻辑正在尝试确定响应是否与"found"匹配。如果没有,则返回false。如果是(匹配"found"),那么您希望它通过验证。但是,根据文档,如果服务器返回一个字符串,则认为它具有“失败”验证,并且该字符串将成为错误消息。我相信您的return false行只是完全禁用remote规则,这就是您能够提交表单的原因。

基本上,您无需手动检查响应是否与任何内容匹配。同样,远程规则只是在验证通过时查找服务器端响应为true,或者falseundefinednull或者如果验证失败则为字符串。然后,所有内容都由 自动 处理,包括错误类

只要您的服务器端代码构造正确以返回所需的响应,您的remote规则只需要看起来像这样......

remote: {
    type: 'post',
    url: 'includes/CheckUsername'
}