JQuery 验证插件 - 设置来自服务器的自定义动态消息

Question

如何在 html 页面上捕获并显示来自服务器端的自定义错误消息？

function getAlertMessage() {
    $.ajax({
        type : "POST",
        url : "getAlert.do",
        success : function(data) {
            data.alertmsg //How to set this msg to validatename property  in messages Attribute
        },
        error : function() {
            alert("No Court No details found");
        }
    });
}

$(document).ready(function() {
   $("#register-form").validate({
       rules : {
        username : {
          required : true,
          validname : true,
          minlength : 4
         }
        },
       messages : {
        username : {
         required : "Please Enter UserName",
         validname : getAlertMessage(), //it does not worked here
         minlength : "UserName is Too Short"}},
         errorPlacement : function(error,element) {
           $(element).closest('.form-group').find('.help-block').html(
error.html());
},
         highlight : function(element) {
         $(element).closest('.form-group')
         .removeClass('has-success')
         .addClass('has-error');
          },
         unhighlight : function(element,
         errorClass, validClass) {
         $(element).closest('.form-group')
         .removeClass('has-error')
         .addClass('has-success');
         $(element).closest('.form-group')
        .find('.help-block').html('');},
          submitHandler : function(form) {
           form.submit();}});});

Answer 1

当 remote 方法已经存在时，为什么还需要执行此操作？

因为这似乎只不过是验证 username 字段的服务器调用，所以请使用为此目的设计的方法。从服务器发回 true、false 或代表动态自定义验证消息的 JSON 编码字符串。

被remote验证的字段的值默认已经发送，所以你只需要定义url和type参数。

$(document).ready(function() {
    $("#register-form").validate({
        rules: {
            username: {
                required: true,
                minlength: 4,
                remote: {
                    url: 'getAlert.do',
                    type: 'POST'
                }
            }
        },
        messages: {
            username: {
                required: "Please Enter UserName",
                minlength: "UserName is Too Short"
                // DO NOT NEED 'remote' message since it's already coming from server
            }
        }, .....

这就是您需要在 rules 和 messages 中定义的全部内容。 username 的值被发送到服务器上的 getAlert.do 函数。

然后从您的服务器，getAlert.do 需要发回一个 true 如果您希望验证通过，以及一个 JSON 编码字符串表示您想要验证时的错误消息失败。

参见：jqueryvalidation.org/remote-method/

Answer 2

我一直在研究这类问题，终于解决了。网上没有类似的东西，这感觉是个好地方，因为它与所问的问题直接相关。

所以我需要的是一个服务器端函数来进行检查并根据检查数据库（有点像 cms）来决定向 return 发送什么错误消息。此消息需要显示给用户并相应地验证字段。

这可能不是 best/cleanest 的方式，但它确实有效，而且我认为它没有那么糟糕！基本上，页面上需要有一个隐藏字段来存储错误消息。所以这就是我如何让它工作的：

jQuery.validator.unobtrusive.adapters.add("customValidation", [], function (options) {
    options.rules["remote"] = {
        url: "/api/CustomValidation",
        type: "post",
        data: {
            fieldValue: function () { return options.element.value; }
        },
        beforeSend : function () {
            // Show loading gif
            $('#loader').show();
        },
        dataFilter: function (data) {
            // if the API returns a JSON string then this is needed
            var result = JSON.parse(data);

            if (result != undefined && result != null) {
                if (result.ErrorMessage != null) {
                    // update a hidden field on the page with the message.
                    $('#HdnValidationMessage').val(result.ErrorMessage);

                    // Field is not valid so return false
                    return false;
                }
                else {
                    // no error message returned so field must be valid
                    return true;
                }
            }
            else {
                // Something has gone wrong! I won't let this stop the user.
                return true;
            }
        },
        complete: function () {
            // hide loading gif
            $('#loader').hide();
        }
    };

    // Default error message set to fetch the error fromt he hidden field.
    options.messages["remote"] = function() { return $('#HdnValidationMessage').val(); }
});

希望它能帮助像我一样被困在这个问题上一段时间的人！

更新：

在没有隐藏字段的情况下完成这项工作。不知道为什么我以前不能，但现在更直接了。

所以现在控制器操作服务器端 return 如果有效则为真，如果不正确则为错误消息。下面将显示错误消息：

 jQuery.validator.unobtrusive.adapters.add("customValidation", [], function (options) {
    options.rules["remote"] = {
        url: "/api/CustomValidation",
        type: "post",
        data: {
            fieldValue: function () { return options.element.value; }
        },
        beforeSend : function () {
            // Show loading gif
            $('#loader').show();
            $(options.element).prop("readonly", "readonly");
        },
        complete: function () {
            // hide loading gif
            $('#loader').hide();
            $(options.element).removeProp("readonly");
        }
    };
});

JQuery 验证插件 - 设置来自服务器的自定义动态消息

JQuery validation plugin - set custom dynamic message from server

jquery

jquery-validate