在 alpaca 表单上显示服务器端验证错误消息答案

【问题标题】：displaying server side validation error messages on alpaca form在 alpaca 表单上显示服务器端验证错误消息
【发布时间】：2020-12-26 07:35:37
【问题描述】：

有人可以提供一个非常简单的示例，说明如何在 alpaca 表单上显示服务器端验证消息吗？

例如如果http://www.alpacajs.org/demos/bootstrap/simple/simple1.html 的简单表单通过 ajax 请求提交并且服务器返回以下（或类似）验证消息，我如何显示消息：

{
  "success":false,
  "errors": [
  {
    "field": "first",
    "message": "first name must be unique"
  },
  { "field": "last",
    "message": "last name must be unique"
  }]
}

我阅读了这些问题，但不幸的是我无法找到解决方案。

【问题讨论】：

标签： alpacajs

【解决方案1】：

我终于想出了一个简单的 jQuery DOM 操作解决方案：

"submit": {
"title": "Send Form Data",
"click": function(e) {
    var errorDiv = '<div class="help-block alpaca-message" style="color: #a94442;"><i class="glyphicon glyphicon-exclamation-sign"></i>&nbsp;';
    var promise = this.ajaxSubmit();
    promise.done(function(sdata) {
        if (sdata.success == true) {
            window.location.href ="/user/occasion";
            return true;
        }
        $.each(sdata.errors, function(field, message) {
            aField = $('[data-alpaca-field-name="' + field + '"]');
            if (aField.length === 0)
                return true;
            aField.addClass('has-error');
            aField.after(errorDiv + message + "</div>");
        });
    });
    promise.fail(function(sdata) {
        var message = 'Server error!</br>' + sdata.responseText;
        $('.alpaca-container').after(errorDiv + message + "</div>");

    });
}

}

【讨论】：