如何识别 alpacajs 字段元素被更改或修改？答案

【问题标题】：How to identify alpacajs field element is changed or modified?如何识别 alpacajs 字段元素被更改或修改？
【发布时间】：2020-10-24 17:45:10
【问题描述】：

我是 alpacajs 的新手。我有 alpacajs 表格，也有 alpacajs 的保存按钮。不仅如此，我还有上一个和下一个按钮。我目前计划开发类似下面的东西。

例如，如果有人来到 alpacajs 表单页面，如果他们修改了表单中的某些字段，那么如果不保存，他们就不能允许上一个/下一个，所以我想禁用这些按钮。如果他们在修改后保存表单，那么他们可以上一个/下一个，所以我想启用这些按钮。

如何在 jquery 和 alpacajs 中做到这一点？

【问题讨论】：

您是否为此使用了向导组件？你能告诉我更多关于下一个/上一个按钮的信息吗？您是否正在使用它们移动到另一页或表单的另一部分？见alpacajs.org/docs/api/wizards.html
我没有使用任何 alpacajs 向导。只是为了移动另一页和上一页而已。
所以就像保存草稿表单一样，无需提交？那么在保存表单后你可以移动到不同的页面，稍后你可以返回表单页面更新一些数据并提交表单？

标签： javascript jquery alpacajs

【解决方案1】：

如果您想将表单数据保存为 alpaca 表单中的草稿表单，您只需在提交旁边添加“另存为草稿”按钮并为其添加一些逻辑即可。

因此 alpaca 将处理该按钮上的点击事件，但不会处理上一个/下一个按钮。这些按钮不在 alpaca 配置中，它们只处理页面导航。

在你的羊驼表单中添加一个新按钮

"form": {
  "buttons": {
    "save": {
      "title": "Save draft",
      "click": function() {
        var value = this.getValue();
        // call backend service to save the form as draft
        $.ajax({
          method: "POST",
          url: "https://httpbin.org/post", // backend webservice
          data: value // form data
         })
        .done(function(data) {
          // check some backend response code or some flag
          // with some conditions activate next and previous buttons
          $("#previousBtn").prop('disabled', false);
          $("#nextBtn").prop('disabled', false);
        })
      }
    },
    "submit": {
      "click": function() {
        var value = this.getValue();
        alert(JSON.stringify(value, null, "  "));
      }
    }
  }
}

不要忘记调用其他网络服务来获取该表单的草稿数据（如果有的话）并像这样初始化 alpaca 数据配置：

// data initialization - here you can call a service to get draft data for this form
data = {
   username: "test"
};

$("#form").alpaca({
   "data": data, // draft data if there's any
   "schema": {
     // alpaca schema config
   }
}

这是一个有效的fiddle。

【讨论】：

【解决方案2】：

请工作示例下面的代码。在此，Name 和 Feeback 字段被标记为 required 和。默认情况下，Name 字段已填充，Feedback 为空，会引发错误，Submit 按钮为 disabled，当您在 中输入内容时反馈 字段，提交按钮得到enabled 并且表单是beig 允许提交，因为所有required 字段都已填写。 S同样，您可以像这样处理您的表单。

希望这会有所帮助！

<html>

<head>
  <link type="text/css" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
  <link type="text/css" href="//cdn.jsdelivr.net/npm/alpaca@1.5.27/dist/alpaca/bootstrap/alpaca.min.css" rel="stylesheet" />
  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script>
  <script type="text/javascript" src="//cdn.jsdelivr.net/npm/alpaca@1.5.27/dist/alpaca/bootstrap/alpaca.min.js"></script>
</head>

<body>
  <div id="form"></div>
  <script type="text/javascript">
    $(document).ready(function() {
      $("#form").alpaca({
        "data": {
          "name": "Diego Maradona",
          "ranking": "excellent"
        },
        "schema": {
          "title": "User Feedback",
          "description": "What do you think about Alpaca?",
          "type": "object",
          "properties": {
            "name": {
              "type": "string",
              "title": "Name",
              "required": true
            },
            "feedback": {
              "type": "string",
              "title": "Feedback",
              "required": true
            }
          }
        },
        "options": {
          "form": {
            "attributes": {
              "action": "http://httpbin.org/post",
              "method": "post"
            },
            "buttons": {
              "submit": {}
            }
          },
          "fields": {
            "name": {
              "size": 20,
              "helper": "Please enter your name."
            },
            "feedback": {
              "type": "textarea",
              "name": "your_feedback",
              "rows": 5,
              "cols": 40,
              "helper": "Please enter your feedback."
            }
          }
        },
        "view": "bootstrap-edit"
      });
    });
  </script>
</body>

</html>

【讨论】：

感谢您的回答。但我期待一些不同的东西。请你再检查一下我的问题，我想你会得到更好的主意。
我没有开发。我有想法。我想发展。但我不知道如何开发，因为我是 alpacajs 的新手。谢谢