如何识别羊驼字段元素被更改或修改？
我对羊驼很陌生。我有羊驼的表单，也有保存按钮的羊驼。更重要的是，我有前一个和下一个按钮。我目前计划开发如下所示的内容。
例如，如果有人来到alpacajs表单页面，如果他们在表单中修改了一些字段，那么如果没有保存，他们就不能允许上一次/下一次访问，所以我想禁用该按钮。如果他们在修改后保存表单，那么他们可以转到前一个/下一个，所以我想要启用这些按钮。
如何在jquery和羊驼中实现这一点？
回答 2
Stack Overflow用户
发布于 2020-07-05 06:28:08
如果要在羊驼表单中将表单数据保存为草稿形式，则只需在提交的旁边添加“另存为草稿”按钮，并向其添加一些逻辑。
因此，羊驼将处理该按钮上的单击事件，但不处理前一个/下一个按钮。这些按钮保留在羊驼配置之外，它们只处理页面导航。
向羊驼窗体添加新按钮
"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, " "));
}
}
}
}如果有，请不要忘记调用其他webservice来获取该表单的数据草稿，并像这样初始化羊驼数据配置：
// 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
}
}这是一个有用的小提琴。
Stack Overflow用户
发布于 2020-07-04 03:43:25
请参阅下面的工作示例代码。在这里，Name和Feeback字段被标记为required和。通过Bydefault，Name字段被填充，反馈为空，抛出错误， submit 按钮为disabled，当您在反馈字段中键入某项时，E 116submitE 217按钮获得enabled，表单允许提交，因为所有required字段都已填充。类似地，您可以像这样处理表单。
希望这能帮上忙！
<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>
https://stackoverflow.com/questions/62724922
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号