Alpacajs验证:允许按钮跳过验证并提交表单吗？

Question

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

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

关于验证的正式文件有点稀疏，似乎意味着可能有必要向表单上的每个字段添加一个自定义验证器，但我希望有一种更简单的方法来做到这一点；我正在想象一个用于保存草稿按钮的自定义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按钮定制"click“事件来做到这一点，您应该将类型从submit更改为按钮：

"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)，以便使用表单属性中使用的相同的webservice/http url。

然后在单击draft_button的event中执行以下操作：

"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
}

不要忘记稍后在提交按钮的单击事件中将草案的值设置为false。