Existem algumas formas de fazer isso.
Eu costumo fazer utilizando o javascript tanto para a validação, quanto para o envio do form(utilizando Ajax). Assim eu tenho controle absoluto de qual momento posso enviar o formulário e também de qual retorno vou obter após o envio e tratativa do servidor.
Uma outra vantagem é que não é necessário carregar a página e isso melhora a experiência do usuário.
Lembrando que também é importante que essa validação de senha seja feita no servidor.
Segue um exemplo da forma em que geralmente faço o submit do formulário:
HTML:
<form id="meuForm" action="">
<label>Senha: </label>
<input id="senha" type="text" name="senha"/>
<button type="submit" id="botaoSubmit"></button>
</form>
No Javascript você pode utilizar o Ajax da forma que preferir, eu faço com Fetch API:
JavaScript
document.querySelector('#meuForm').addEventListener('submit', function(e){
// Isso impede que o form seja enviado ao clicar no botão de envio do formulário
e.preventDefault();
// Aqui você pode recuperar a senha e verificar se a mesma está no formato desejado
let senha = document.querySelector('#senha').value;
let senhaValida = VerificaSenha(senha);
if(senhaValida == true){
EnviaForm(senha);
} else {
// Aqui vai o trecho de código para exibir a mensagem de erro em uma DIV
}
});
function EnviaForm(senha){
fetch(`suaUrl`, optionsPost = { method: "POST", mode: "cors", body: senha })
.then(response => {
response.json()
.then(data => {
// Deu certo o envio
console.log(data);
})
.catch();
})
.catch(error => {
// Se o server apresentar erro em qualquer ação cairá aqui
console.log("Erro: " + error);
});
}
Dessa forma, toda a validação é controlada pelo javascript antes do envio do formulário ao servidor.