jQuery远程验证(不阻止表单提交) [英] JQuery remote validation (doesn't block form submit)

问题描述

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

I am facing the following problem. In the signup form it tries to remotly check, if a given username is already used. This works well and if a username is already in use, my adding an error class works fine. The problem is, that you can still submit the register form, even though the username is already in use. Shouldn't the remote validation block it?

这是我的验证码.

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');

});

任何提示将不胜感激.

推荐答案

请参阅 remote方法:

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

options:
These options deep-extend the defaults (dataType:"json", data:{nameOfTheElement:valueOfTheElement}). Any options you provide will override the defaults.

和...

响应被评估为JSON，对于有效元素，必须为true， 并可以是任何false，undefined或null来表示无效元素，使用 默认消息；或字符串，例如该名称已被使用，请尝试 改为显示"peter123"作为错误消息.

The response is evaluated as JSON and must be true for valid elements, and can be any false, undefined or null for invalid elements, using the default message; or a string, eg. "That name is already taken, try peter123 instead" to display as the error message.

(上面的响应"一词是指服务器端代码的响应)

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

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检查用户名字段，但是您需要将其与电子邮件地址字段一起发送.

As per the documentation quoted above, the default value of the data option is already nameOfTheElement: valueOfTheElement, so there is no apparent need for you to over-ride it at all here. There is nothing wrong with your syntax, but this option is only needed if you also have to send data from another field along with data from the field targeted by remote; example- you're checking username field with remote but you need to send the email address field along with it.

关于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规则接收通过/失败状态时，正确的类应用将自动全部自动发生.

There is absolutely no need for you to specify .addClass('has-error').removeClass('has-success') and .removeClass('has-error').addClass('has-success'). When the remote rule recieves pass/fail status, the proper application of classes is going to happen automatically all by itself.

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

Your logic is trying to determine if the response matches "found". If it does not, you return false. If it does (match "found"), then you want it to pass validation. However, as per the documentation, if a string is returned by the server it's considered to have "failed" validation and the string becomes the error message. I believe that your return false line is doing nothing more than disabling the remote rule entirely, which is why you're able to submit the form.

基本上，绝对不需要您手动检查响应是否匹配任何内容.同样，如果验证通过，则远程规则只是在寻找服务器端响应为true，否则为false，undefined，null，或者如果验证失败则为字符串.然后，一切由插件自动 处理，包括错误类.

Basically, there is absolutely no need for you to manually check if the response matches anything. Again, the remote rule is simply looking for your server-side response to be true if validation passes, or false, undefined, null, or a string if validation fails. Everything is then automatically handled by the plugin, including the error classes.

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

As long as your server-side code is constructed properly to return the required responses, your remote rule only needs to look something like this...

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

这篇关于jQuery远程验证(不阻止表单提交)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！