Fiori 필수 별표 — required 금지, 90% 실수 원인 #shorts #SAP #Fiori

이 글이 답하는 질문

• Fiori 폼에서 필수 입력 별표(*)는 어떻게 표시하나?
• Label required 속성만으로 충분한가, 아니면 Input도 건드려야 하나?
• 저장 버튼 클릭 시 빈 필수 필드를 어떻게 잡나?

직접 해보기

1. XML View — required 한 줄 추가

<Label text="회사명" required="true" labelFor="companyInput"/>
<Input id="companyInput" placeholder="회사명 입력"/>

Label의 required="true" 하나면 빨간 별표가 자동 렌더링됩니다. Input엔 아무것도 안 해도 됩니다.

2. 저장 시 빈 값 검증

onSave: function() {
  var oInput = this.byId("companyInput");
  if (!oInput.getValue()) {
    oInput.setValueState("Error");
    oInput.setValueStateText("필수 입력 항목입니다.");
    return;
  }
  // 저장 로직
}

삽질 노트

• 실수 1 — labelFor 빠뜨리기: labelFor 없으면 스크린리더가 Label과 Input을 연결 못 해 접근성 위반. 항상 짝 맞춰라.
• 실수 2 — Input에도 required 달기: <Input required="true"/>는 HTML5 attribute지만 UI5 Input은 이를 무시. 별표는 Label에만 달아야 표시된다.
• 실수 3 — required만 믿고 검증 생략: required="true"는 시각 표시일 뿐, 저장 막아주지 않는다. setValueState("Error")는 별도로 구현해야 한다.

핵심 한 줄

Label의 required="true"는 별표만 그린다 — 실제 검증은 setValueState로 직접 써라.

더 파볼 주제

• MessageManager로 폼 전체 필수 필드 일괄 검증
• SimpleForm vs SmartForm — required 처리 방식 차이