Padrão de Campo not Visual Required

Resumo do Padrão

Selects com campo default, radios e inputnumber, mesmo que sejam required na API, não precisam ser simbolizados como required na interface. Como já vêm preenchidos e não podem ser setados como vazios, não há necessidade de chamar a atenção do usuário para o preenchimento.

Sobre

Este padrão define quando e como sinalizar campos como required na interface. Ele busca evitar distrações desnecessárias para o usuário em campos que já possuem valores padrão ou não podem ser deixados em branco.

Contexto & Problema

Marcar campos como required na interface pode gerar confusão ou sobrecarregar visualmente o usuário, especialmente quando o preenchimento já está garantido por valores padrão ou restrições do componente. Isso pode desviar a atenção de campos realmente críticos que precisam de ação do usuário.

Quando Usar

• Para campos como:
  • Selects com valores padrão
  • Radios com uma opção pré-selecionada
  • InputNumber com valores padrão ou limites que impedem valores inválidos
• Quando o preenchimento do campo já está garantido pela lógica do componente ou pela API

Componentes Utilizados

• Select (Console Kit Blocks)
• Radio Button (Console Kit Blocks)
• InputNumber (Console Kit Blocks)

Exemplo Visual

Custom Pages > Create Custom Page Code

Comportamento Esperado

Regras Principais

1. Evitar marcação desnecessária: Campos com valores padrão ou que não podem ser deixados vazios não devem ser marcados como required na interface
2. Foco em campos críticos: Apenas campos que exigem ação explícita do usuário devem ser destacados como required
3. Consistência com a API: Certifique-se de que a lógica de validação da interface está alinhada com as regras da API

Tipos de Campo

• Select com default: Não marcar como required visualmente
• Radio pré-selecionado: Não marcar como required visualmente
• InputNumber com default: Não marcar como required visualmente
• Campos vazios obrigatórios: Marcar como required na interface

Implementação

fieldValidation.js

const isFieldRequired = (field) => {
    // Define se o campo deve ser marcado como required na interface
    if (field.type === 'select' && field.defaultValue) return false;
    if (field.type === 'radio' && field.defaultValue) return false;
    if (field.type === 'inputNumber' && field.defaultValue !== undefined) return false;

    return field.required; // Apenas marca se realmente necessário
};

// Exemplo de uso
const fields = [
    {
        name: 'Edge Connector',
        type: 'select',
        required: true,
        defaultValue: 'Default Connector'
    },
    {
        name: 'Response TTL',
        type: 'inputNumber',
        required: true,
        defaultValue: 0
    }
];

fields.forEach(field => {
    console.log(`${field.name} is required in UI?`, isFieldRequired(field));
});

Boas Práticas

Recomendações

• Destaque como required apenas os campos que realmente precisam de atenção do usuário
• Garanta que campos com valores padrão ou pré-selecionados não sejam marcados como required na interface
• Alinhe a validação da interface com as regras da API para evitar inconsistências
• Teste o comportamento dos campos em diferentes cenários para garantir clareza e usabilidade

Anti-padrões

O que Evitar

• Marcar como required campos que já possuem valores padrão ou não podem ser deixados vazios
• Destacar todos os campos como required, gerando sobrecarga visual e confusão para o usuário
• Ignorar validações críticas em campos que realmente exigem preenchimento

Acessibilidade

• Certifique-se de que os campos destacados como required sejam anunciados corretamente por leitores de tela
• Utilize atributos como aria-required="true" apenas em campos que realmente precisam de atenção
• Garanta contraste adequado para os indicadores visuais de campos obrigatórios

Referências

• W3C – Accessible Form Validation