如何识别 alpajajs 字段元素被更改或修改？

Question

我是羊驼的新手。我有 alpajas 表格，也有 alpajas 的保存按钮。不仅如此，我还有上一个和下一个按钮。我目前计划开发如下内容。

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

如何使用 jquery 和 alpajas 执行此操作？

Answer 1

请下面的工作示例代码。在此，Name和Feeback字段被标记为required和。默认情况下，Name 字段已填充，Feedback 为空会引发错误，Submit 按钮为 disabled，当您在 Feedback 字段中输入内容时，Submit 按钮得到 enabled 并且表单为米色允许提交，因为所有 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>

Answer 2

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

因此 alpaca 将处理该按钮上的单击事件，但不会处理 Previous / Next 按钮。这些按钮不在 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。

如何识别 alpajajs 字段元素被更改或修改？

How to identify alpacajs field element is changed or modified?

javascript

jquery

alpacajs