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:

The Container control also has an isValid property.

The isValid property for the Container control applies to all controls part of the container.

For more information on this, check the Container validation page.

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.