Estou tentando criar um pequeno formulário com validação dentro de uma caixa de diálogo modal. A caixa de diálogo possui um botão de cancelamento que deve ocultar a caixa de diálogo:

Eu criei um pequeno projeto para verificá-lo:

https://embed.plnkr.co/jF202JGxI0f7BjeKhL7A/

O campo de nome tem uma validação que é acionada se o nome for deixado vazio. O campo de entrada fica em foco quando a caixa de diálogo é mostrada.

Agora o problema está pressionando cancelar sem inserir nenhum texto.

A validação entra em ação antes que o manipulador de cliques do botão seja acionado. O resultado é que a mensagem de erro é exibida. Isso move o botão Cancelar para baixo e o clique vai para o nirvana.

Você pode verificar esse comportamento clicando na parte superior do botão Cancelar. Se você clicar na parte inferior, tudo funcionará conforme o esperado (exceto que eu preferiria não mostrar a mensagem de validação).

Então ... o que eu gostaria de ter:

Acionar validação se o usuário

sai do campo pressionando tabclica no próximo campo (em alguma outra caixa de diálogo com mais campos)clica em ok / criar métricaaltera o conteúdo do campo

Disparar nenhuma validação se o usuário

clica em cancelarcliques fora da caixa de diálogo