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"],}
    },"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
    }
});

chahu2008 回答:Alpacajs验证:是否可以允许按钮跳过验证并提交表单?

您可以通过如下方式为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。 / p>

然后在草稿按钮的单击事件方法中执行以下操作:

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

本文链接:https://www.f2er.com/3114938.html

大家都在问