Alpacajs 验证：是否可以允许按钮跳过验证并提交表单？

Question

我有一个带有两个按钮的 alpacajs 表单：“保存草稿”和“提交”。我试图为这些按钮实现的行为是：

• 即使有空的必填字段或其他验证问题，用户也可以单击“保存草稿”按钮并提交表单；他们的数据将被保存，以便他们以后可以在表单上继续工作；他们的部分数据将存储在后端，并在他们返回时包含在data 数组中。
• “提交”按钮行为正常；在表单验证之前，它一直处于禁用状态。他们的最终提交数据将存储在后端，标记为已完成并锁定。

official documentation about validation 有点稀疏，似乎暗示可能需要为表单上的每个字段添加自定义验证器，但我希望有更简单的方法来做到这一点；我正在想象“保存草稿”按钮的自定义 onClick 行为，例如

onClick="function(){$('#form').alpaca('get').justMarkTheWholeFormValidAndGo()}"

我一直在尝试使用基本的“入门”示例表单来完成这项工作：

$("#form").alpaca({
    "data": {
    },
    "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"
            },
            "ranking": {
                "type": "string",
                "title": "Ranking",
                "enum": ["excellent", "ok", "so so"],
                "required": true
            },
        }
    },
    "options": {
        "form": {
            "attributes": {
                "action": "/path/to/submission/handler/",
                "method": "post"
            },
            "buttons": {
                "save_draft": {
                    "type": "submit",
                    "value": "Save Draft",
                    "attributes": {
                        "name": "safe_draft"
                    }
                },
                "submit": {
                    "type": "submit",
                    "value": "Submit",
                    "attributes": {
                        "name": "submit"
                    }
                }
            }
        },
        "helper": "Tell us what you think about Alpaca!",
        "fields": {
            "name": {
                "size": 20,
                "helper": "Please enter your name."
            },
            "feedback": {
                "type": "textarea",
                "rows": 5,
                "cols": 40,
                "helper": "Please enter your feedback."
            },
            "ranking": {
                "type": "select",
                "helper": "Select your ranking.",
                "optionLabels": ["Awesome!", "It's Ok", "Hmm..."]
            },
        },
        "hideInitValidationError": true
    }
});

Answer 1

您可以通过像这样自定义 save_draft 按钮的“点击”事件来做到这一点，您应该将类​​型从提交更改为按钮：

"save_draft": {
      "type": "button",
      "value": "Save Draft",
      "attributes": {
           "name": "safe_draft"
      },
      "click": function() {
           // put here your logic to save the form data
           // and ajax call for a backend service for example
           // only data that are set will be sent in request body or you can create your own model with nullable values...
      }
}

您还可以添加一个隐藏字段（请参阅http://www.alpacajs.org/docs/fields/hidden.html），如果您要发送草稿或不发送草稿，则采用 true/false，以便使用表单属性中使用的相同 webservice/http url。

然后在 draft_button 的点击事件方法中这样做：

"click": function() {
        // setting draft to TRUE
        var control = $("#form").alpaca("get"); // getting alpaca control
        var field = control.getControlByPath("draft"); // getting the draft field
        field.setValue(true); // set value to true
        this.ajaxSubmit(); // send the data using ajax
}

并且不要忘记稍后在提交按钮的点击事件中将draft的值设置为false。