Usar Validação de entrada obrigatória

Informações em segundo plano

Você pode usar a validação de entrada obrigatória para notificar o usuário em tempo de execução que a entrada para controle é obrigatória definindo a propriedade Obrigatório para =true. Você também pode configurar uma mensagem de erro se o controle não for preenchido no tempo de execução usando a propriedade Mensagem de erro obrigatória.

Você pode adicionar texto ao lado do controle usando a nova propriedade Rótulo. Você pode colocar o rótulo acima ou à esquerda do controle usando a propriedade Colocação de rótulo na aba Estilo.

Esta propriedade está disponível atualmente para os seguintes controles de entrada:

• Seletor de Data
• Lista suspensa
• Seletor de arquivo
• Lista suspensa de seleção múltipla
• Botão de Opção
• Controle Deslizante
• Área de Texto
• Caixa de texto

Observação:

O controle Container também possui uma propriedade isValid .

A propriedade isValid para o controle Container se aplica a todos os controles que fazem parte do contêiner.

Para obter mais informações sobre isso, verifique a página Validação de contêineres.

No exercício abaixo vamos criar um formulário simples com validação de entrada obrigatória. Você pode usar este exercício para entender melhor como a validação de entrada obrigatória funciona e aprender como usá-la de forma eficiente em seus aplicativos.

Construir um formulário usando a validação de entrada obrigatória

Etapas

1. Abra seu aplicativo existente ou inicie um novo.

2. Adicione um controle Botão ao seu aplicativo.

   • Adicione Subscribe na propriedade Texto.

3. Adicione uma nova página em branco ao seu aplicativo.

   • Renomeie a página para Assinar página.

4. Adicione um controle de exibição de Cabeçalho no topo da página.

   • Adicione Subscribe to this app na propriedade Texto.

5. Adicione um controle Caixa de texto abaixo cabeçalho.

   • Renomear para Name.
   • Adicione Name: na propriedade Rótulo.
   • Defina a propriedade Obrigatório de Validação para =true.

6. Adicione um controle Caixa de texto abaixo da caixa de texto Nome.

   • Renomear para Email.
   • Adicione Email: na propriedade Rótulo.
   • Defina a propriedade Obrigatório de Validação para =true.

7. Adicione um controle Datepicker abaixo da última caixa de texto.

   • Renomear para Date of birth.
   • Adicione Date of birth: na propriedade Rótulo.
   • Defina a propriedade Obrigatório de Validação para =true.
     
     

     

     
     
     Observação:

     Cada um desses controles tem uma propriedade isValid. Essa propriedade nos dirá se um controle é válido ou não.

     Por padrão, quando a propriedade Obrigatório de um controle for definida para =true, o controle não será válido.

     Figura 1. .

8. Adicione um controle Botão abaixo do datepicker.

   • Adicione Submit na propriedade Texto.
   • Na propriedade Desabilitado, use a propriedade isValid dos controles previamente configurados para construir a seguinte expressão: =! Name.isValid || !Email.isValid || !Date of birth.isValid.
     
     

     

     
     

9. Acesse o botão Assinar na Página principal e configure o evento Clicado em.

   • Adicione uma regra Abrir uma página.
   • Adicione a Página Assinar no campo Quais páginas abrir.

   • Marque a caixa de seleção Mostrar como Pop-over (Modal).

     
     

     

     
     

Resultados do procedimento

Após seguir todas as etapas acima, você pode visualizar seu aplicativo.

No modo de visualização, se você clicar no botão Assinar, a Assinar página será aberto. Observe que o botão Enviar está desativado e só ficará habilitado quando todos os campos obrigatórios estiverem preenchidos.

Observação:

Se você digitar um valor em qualquer campo e depois removê-lo, uma mensagem de erro será exibida e o botão será desativado novamente.