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

Question

我有一个带有两个按钮的 alpajajs 表单："Save Draft" 和 "Submit"。我试图为这些按钮实现的行为是：

用户可以单击'Save Draft'按钮并提交表单，即使有空的必填字段或其他验证问题；他们的数据将被保存，以便他们以后可以继续处理表格；他们的部分数据将存储在后端，并在他们回来时以 data 数组的形式包含。
'Submit'按钮正常；在表单验证之前，它一直处于禁用状态。他们的最终提交数据将存储在后端，标记为已完成并锁定。

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

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

我一直在尝试使用基本的 "Getting started" 示例表单来完成这项工作：

$("#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" 事件来完成此操作，您应该将类型从提交更改为按钮：

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

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

Alpacajs validation: Is it possible to allow a button to skip validation and submit the form?

javascript

forms

validation

jquery

alpacajs