Alpacajs 유효성 검사 : 단추가 유효성 검사를 건너 뛰고 양식을 제출하도록 허용 할 수 있습니까?

debugcn 에 게시 Dev

밴조

"초안 저장"과 "제출"이라는 두 개의 버튼이있는 alpacajs 양식이 있습니다. 이 버튼에 대해 구현하려는 동작은 다음과 같습니다.

사용자는 '초안 저장'버튼을 클릭하고 비어있는 필수 필드 또는 기타 유효성 검사 문제가있는 경우에도 양식을 제출할 수 있습니다. 나중에 양식 작업을 재개 할 수 있도록 데이터가 저장됩니다. 부분 데이터는 백엔드에 저장되고 data돌아올 때 양식 배열에 포함 됩니다.
'제출'버튼은 정상적으로 작동합니다. 양식의 유효성이 검사 될 때까지 비활성화 된 상태로 유지됩니다. 최종 제출 데이터는 백엔드에 저장되고 완료 됨으로 표시되고 잠 깁니다.

검증에 대한 공식 문서는 다소 스파 스이며 양식의 모든 필드에 사용자 정의 유효성 검사기를 추가 할 필요가있을 수 있음을 암시하는 것 같다,하지만 난이 할 수있는 간단한 방법이 바라고 있어요; 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
    }
});

Oussama BEN MAHMOUD

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로 설정할 수도 있습니다. 양식 속성에 사용되는 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
}

나중에 제출 버튼 클릭 이벤트에서 초안 값을 false로 다시 설정하는 것을 잊지 마십시오.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-1

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사