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）来决定要返回的错误消息。此消息需要显示给用户并相应地验证字段。

它可能不是最好/最干净的方式，但它有效，我不认为它那么糟糕！基本上，页面上需要有一个隐藏字段来存储错误消息。所以我的工作方式如下：

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(); }
});

希望能帮助那些像我一样被困一段时间的人！

<强>更新

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

所以现在控制器动作服务器端如果有效则返回true，如果不正确则返回错误消息。以下将显示错误消息：

 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验证插件 - 从服务器设置自定义动态消息

2 个答案: