2

Num evento de mudança de campo tento validar um nome de usuário através de uma chamada Ajax. Aparentemente o setCustomValidity do Html5 não funciona com o jQuery. Peço ajuda para quem manja de javascript.



$("#entrada_usuario").blur(function () {
    var obj = new Object();
    obj.usuario = $("#entrada_usuario").val();
    var parametro = JSON.stringify(obj);
            $.ajax
            (
                {
                    type: "post",
                    url: "validausuario.php",
                    data: parametro,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (resultado) {
                        if (resultado != 0) {

                            var element = $("#entrada_usuario")[0];
                            element.setCustomValidity('Usuário já existe!');
                            alert(element.checkValidity());
                            alert(element.validationMessage);
                        }
                        else {      
                            $("#entrada_usuario")[0].setCustomValidity("");
                        };
                    },
                    error: function (resultado) { ProcessError(resultado) }
                }
            );

});

<label for="usuario">Usuário:</label>
<input type="text" name="usuario" id="entrada_usuario"  placeholder="Digite o nome de usuário" required />     

página validausuario.php

$usuario = $_POST['usuario'];
$validar = $pdo->prepare("SELECT * FROM usuario WHERE login='$usuario'");
$validar -> execute();
$result = $validar->rowCount();
echo json_encode($resultado);       

1 Resposta 1

0

Para acionares o erro tens de fazer submit da form. Não é possivel disparar a validação só num elemento. Podes saber se ele está válido, como tinhas na pergunta com o .checkValidity() mas isso não mostra a mensagem, só com o submit da form.

De resto o teu código parece-me bem e o .setCustomValidity() funciona bem.

Exemplo:

var input = document.querySelector('input');
console.log(input);
input.setCustomValidity('Usuário já existe!');
console.log(input.checkValidity())
console.log(input.validity)
<form action="">
	<input type="text">
	<button type="submit">Enviar</button>
</form>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .