Validar dados tanto client-side como server-side

aprendiz_ce · Maio 25, 2016

Prezados,

Gostaria da ajuda de vocês para implementar uma validação de dados tanto client-side como server-side simultaneamente. Eu sei fazer isso usando o jquery e o PHP criando as devidas verificações quando necessito. Sobre esse assunto propriamente dito, não tenho dúvidas. A questão é que recentemente passei a utilizar o plugin jquery.validate e não sei como "unir" o mesmo ao PHP e assim validar dados simultaneamente. Será que alguém sabe como faço isso? Isso é possível? Se sim, adoraria que alguém me mostrasse um pequeno exemplo de como faz, só para que eu pudesse adaptar para a minha realidade. Lembrando: Também tenho dúvidas sobre o uso jquery.validate separadamente.

Grato e aguardo qualquer tipo de ajuda.

Stoma · Maio 25, 2016

Boa tarde!

Na verdade as validações não são feitas simultaneamente; elas são feitas em momentos diferentes (primeiro client-side e depois server-side). É mais ou menos assim (exemplo):

1 - Quando o usuário clica no botão salvar/enviar, a função no JavaScript (ou no seu caso o jQuery.validate) faz a validação dos dados (client-side). Se as informações não forem válidas, a execução é interrompida; mas se as informações estiverem corretas, então o usuário é direcionado para o PHP (submit ou AJAX) onde os dados serão salvos (server-side);

2 - No PHP (server-side), antes de salvar/utilizar as informações, todos os dados são validados novamente. É um outro código, que basicamente deve fazer as mesmas validações que foram feitas no client-side.

O motivo de fazer as validações no client-side é por questões de usabilidade (é mais fácil, simples e rápido para o usuário preencher formulários com a validação "em tempo real", do que preencher, enviar os dados, aí ver que algo está errado, corrigir, preencher novamente, enviar, corrigir, enviar, etc) e também é mais leve para o servidor (porque caso os dados estejam incorretos, ele nem mesmo é solicitado).

A validação principal é a que fica no server-side, porque é ela que vai garantir que os dados estejam corretos, já que a validação client-side é facilmente burlável.

Basicamente é isso... você faz a validação duas vezes (client-side E server-side) com códigos diferentes (mas usando a mesma lógica). Por exemplo:

no JavaScript:

<script>
  var senha = $("#senha").val();
  if(senha.length < 8){
      alert("Sua senha deve ter ao menos 8 caracteres");
      return false; // se está incorreto, então já para a execução
  }

  if(... // valida outro campo
      return false;
  }

  if(... // valida outro campo
      return false;
  }

  salvar();

e as mesmas validações no PHP:

<?php
$senha = $_POST["senha"];
if(strlen($senha) < 8){
	echo "Sua senha deve ter ao menos 8 caracteres";
	die(); // se está incorreto, então já para a execução
}

if(... // valida outro campo
	die();
}

if(... // valida outro campo
	die();
}

Claro que o código vai depender de como está seu projeto, mas acho que dá para ter uma ideia de como seria.

.

Obs: no exemplo do PHP faltou chamar a "função" salvar() depois dos if's (não consigo editar a resposta).

aprendiz_ce · Maio 25, 2016

4 horas atrás, Stoma disse:
Boa tarde!

Na verdade as validações não são feitas simultaneamente; elas são feitas em momentos diferentes (primeiro client-side e depois server-side). É mais ou menos assim (exemplo):

1 - Quando o usuário clica no botão salvar/enviar, a função no JavaScript (ou no seu caso o jQuery.validate) faz a validação dos dados (client-side). Se as informações não forem válidas, a execução é interrompida; mas se as informações estiverem corretas, então o usuário é direcionado para o PHP (submit ou AJAX) onde os dados serão salvos (server-side);

2 - No PHP (server-side), antes de salvar/utilizar as informações, todos os dados são validados novamente. É um outro código, que basicamente deve fazer as mesmas validações que foram feitas no client-side.

O motivo de fazer as validações no client-side é por questões de usabilidade (é mais fácil, simples e rápido para o usuário preencher formulários com a validação "em tempo real", do que preencher, enviar os dados, aí ver que algo está errado, corrigir, preencher novamente, enviar, corrigir, enviar, etc) e também é mais leve para o servidor (porque caso os dados estejam incorretos, ele nem mesmo é solicitado).

A validação principal é a que fica no server-side, porque é ela que vai garantir que os dados estejam corretos, já que a validação client-side é facilmente burlável.

Basicamente é isso... você faz a validação duas vezes (client-side E server-side) com códigos diferentes (mas usando a mesma lógica). Por exemplo:

no JavaScript:
<script>
  var senha = $("#senha").val();
  if(senha.length < 8){
      alert("Sua senha deve ter ao menos 8 caracteres");
      return false; // se está incorreto, então já para a execução
  }

  if(... // valida outro campo
      return false;
  }

  if(... // valida outro campo
      return false;
  }

  salvar();
e as mesmas validações no PHP:
<?php
$senha = $_POST["senha"];
if(strlen($senha) < 8){
	echo "Sua senha deve ter ao menos 8 caracteres";
	die(); // se está incorreto, então já para a execução
}

if(... // valida outro campo
	die();
}

if(... // valida outro campo
	die();
}
Claro que o código vai depender de como está seu projeto, mas acho que dá para ter uma ideia de como seria.

.

Obs: no exemplo do PHP faltou chamar a "função" salvar() depois dos if's (não consigo editar a resposta).

Olá, boa noite.

Pois é, quando eu menciono "simultaneamente" é só modo de falar. Eu sei que a "coisa" ocorre em duas fases, ou seja, primeiro o client e depois o server. Não se preocupe com isso, foi só um descuido meu.

Agora sobre o seu exemplo está exatamente como eu faço quando não uso o plugin jquery.validate. Eu quero é fazer isso daí, mas com o referido plugin junto. Como eu faço? Só necessito de uma dica, orientação que daí eu me viro sozinho.

Muito obrigado pela sua atenção e aguardo seu comentário.

Stoma · Maio 26, 2016

Ah sim, entendi.

Bom, não sei qual jQuery validate você está usando (procurando na internet tem vários com esse nome), mas acredito que na documentação do plugin você vai achar como usar e também alguns exemplos. Qual você usa?

Esse por exemplo https://github.com/DiegoLopesLima/Validate#readme na documentação tem explicando (nas seções Parameters e Callbacks).

aprendiz_ce · Maio 26, 2016

12 horas atrás, Stoma disse:

Ah sim, entendi.

Bom, não sei qual jQuery validate você está usando (procurando na internet tem vários com esse nome), mas acredito que na documentação do plugin você vai achar como usar e também alguns exemplos. Qual você usa?

Esse por exemplo https://github.com/DiegoLopesLima/Validate#readme na documentação tem explicando (nas seções Parameters e Callbacks).

Stoma,

É exatamente esse que estou utilizando.

Eu já dei uma olhada na net procurando por algo que me desse uma "luz", mas não encontrei nada. Te confesso mesmo dando uma olhada no link passado por você ainda não consegui entender com fazer o que necessito. O problema todo é fazer a segunda validação (server-side) junto com a primeira validação (client-side) mas de transparente.

Mais uma vez obrigado pela sua atenção.

Stoma · Maio 26, 2016

Você dá submit no formulário ou está usando AJAX?

aprendiz_ce · Maio 26, 2016

Uso um FORM com SUBMIT, mas o POST para o DB (server-side) é AJAX.

O plugin jquery,validate que estou utilizando é esse: https://jqueryvalidation.org/validate/.

Stoma · Maio 27, 2016

Acho que fica mais fácil você mostrar seu código (o formulário, o código onde chama o plugin e a parte do PHP que recebe os dados), aí posso te auxiliar melhor.

aprendiz_ce · Maio 31, 2016

Entendido.

Pra ficar melhor, vou criar um exemplo pequeno de como utilizo.

Até já.

aprendiz_ce · Maio 31, 2016

Entendido.

Pra ficar melhor, vou criar um exemplo pequeno de como utilizo.

html:

<form>
    <div class="form-group">
        <label class="control-label" for="firstname">Nome:</label>
        <div class="input-group">
            <span class="input-group-addon">$</span>
            <input class="form-control" placeholder="Insira o seu nome próprio" name="firstname" type="text" />
        </div>
    </div>
         
    <div class="form-group">
        <label class="control-label" for="lastname">Apelido:</label>
        <div class="input-group">
            <span class="input-group-addon">€</span>
            <input class="form-control" placeholder="Insira o seu apelido" name="lastname" data-menssage-required="ola mundo" type="text" />
        </div>
    </div>
     
        <button type="submit" class="btn btn-primary">Submit</button>
</form>

js:

function enviaForm() {
	$.ajax({
		type: "POST",
		url: "ajax-form.php",
		data: $("#form").serialize(),
		dataType: "json",
		success: function(data){
						
		},
		error: function(){
						
		}
	});
}


$('form').validate({
    rules: {
        firstname: {
            minlength: 3,
            maxlength: 15,
            required: true
        },
        lastname: {
            minlength: 3,
            maxlength: 15,
            required: true
        }
    },
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    },
});
submitHandler: enviaForm

php:

$sql = "INSERT INTO empresas (
				firstname, 
				lastname
			) VALUES (
				'".mysql_real_escape_string($_POST['firstname'])."', 
				'".mysql_real_escape_string($_POST['lastname'])."'
			)";
			
		$resultado = mysql_query($sql);

Grato e aguardo retorno.

Stoma · Maio 31, 2016

Nesse caso, para fazer a validação, você pode fazer assim:

js:

function enviaForm(){
	$.ajax({
		type: "POST",
		url: "ajax-form.php",
		data: $("#form").serialize(),
		dataType: "json",
		success: function(data){
			// caso o status seja diferente de "1", é porque houve algum erro durante processo
			if(data.status != 1){
				// exibe a mensagem de erro que retornou da requisição, ou
				// uma mensagem genérica (caso não tenha uma mensagem específica)
				alert(data.errorMsg || "Não foi possível processar a solicitação. Tente novamente.");
				return;
			}
			
			alert("Dados salvos com sucesso!");
		},
		error: function(){
			
		}
	});
}

php:

<?php
// status "0" = falha, status "1" = sucesso;
// caso o processo falhe, a mensagem de erro estará em "errorMsg";
$ajaxResponse = Array(
	"status" => ,
	"errorMsg" => null
);

try{
	$firstname = $_POST["firstname"];
	$lastname = $_POST["lastname"];
	
	// valida os dados novamente (a mesma validação que é feita no js);
	// se a informação não for válida, lança exceção (ela é tratada mais abaixo, no catch);
  	// não é necessário uma mensagem muito específica, pois o usuário vai ver (pelo menos deveria) a mensagem de validação do javascript;
  	// essa validação no PHP é necessária para certificar que os dados realmente estejam corretos
	if(empty($firstname) || strLen($firstname) < 3 || strLen($firstname) > 15){
		throw new Exception("Dados inválidos!");
	}
	
	// valida os dados novamente (a mesma validação que é feita no js)
	// se a informação não for válida, lança exceção (ela é tratada mais abaixo, no catch);
  	// não é necessário uma mensagem muito específica, pois o usuário vai ver (pelo menos deveria) a mensagem de validação do javascript;
  	// essa validação no PHP é necessária para certificar que os dados realmente estejam corretos
	if(empty($lastname) || strLen($lastname) < 3 || strLen($lastname) > 15){
		throw new Exception("Dados inválidos!");
	}
	
	// se tivesse mais validações, seriam feitas semelhantes às de cima, lançando exceção em caso de informação inválida
	// ...
	
	$sql = "
		INSERT INTO
			empresas(firstname, lastname)
			VALUES (
				'".mysql_real_escape_string($firstname)."', 
				'".mysql_real_escape_string($lastname)."'
			)
	";
	$resultado = mysql_query($sql);
	
	// verifica se realmente inseriu as informações
	if(!$resultado){
		throw new Exception("Não foi possível inserir as informações.");
	}
	
	// caso chegue ao final, é porque o processo foi concluído com sucesso, logo o status é "1"
	$ajaxResponse["status"] = 1;
}catch(Exception $ex){
	// trata as exceções (erros) e armazena a mensagem de erro para poder ser usada no javascript
	$ajaxResponse["errorMsg"] = $ex->getMessage();
}

// retorna o resultado da requisição ajax usando o formato JSON para
// que os dados possam ser lidos no javascript
echo json_encode($ajaxResponse);
die();

Existem outras formas de fazer (algumas até mais simples), mas este é mais ou menos o padrão que eu utilizo. Assim consigo controlar o processo (ajax) todo, e caso dê algo de errado também é possível informar o usuário o que aconteceu.

obs: os outros códigos (HTML e $('form').validate) não foram alterados (coloquei apenas os que foram alterados).

obs2: onde está

"status" => ,

na verdade tem um 0 (zero) antes da vírgula... mas o fórum remove quando posta a mensagem... então se você for testar, coloca o zero no código (assim: "status" => 0, )

aprendiz_ce · Junho 1, 2016

Stoma,

Antes de mais nada, muito obrigado pela sua determinação em me ajudar.

Pois é, eu também já usei algo semelhante assim conforme você recomenda, mas dessa forma caso o server-side falhe, eu estarei informando ao usuário algo genérico, e não exatamente o que ocorreu, ou seja, o campo que não foi preenchido de forma indevida. Eu já pensei em retornar um array/json completo indicando o que falhou e o que não falhou e conseguintemente mostra de forma correta para o usuário o ocorrido, mas penso que dessa forma o "remendo ficará maior que o soneto". O que você acha?

Stoma · Junho 1, 2016

Sem problemas! Debater é uma ótima forma de aprender também xD

Pois é. Mas nesse caso, a intenção da validação server side é garantir que os dados estejam corretos antes de, por exemplo, inserir no banco. Essas mensagens (do server-side) não serão exibidas para o usuário comum, pois se a validação client-side foi feita corretamente, a requisição só será feita quando os dados estiverem corretos. Só que existem N formas de burlar a validação client-side, e é aí que entra a necessidade da validação server-side. Alguém mal intencionado pode tentar explorar falhas de segurança no sistema... as validações client-side ele burla fácil, mas a server-side não.

Ou seja, o usuário comum, aquele do dia a dia, vai ver as mensagens que estão no client-side. Sendo assim, as mensagens do server-side não precisam necessariamente ser tão específicas, indicando cada coisinha que está errada. Inclusive, dependendo da informação que você der para o usuário, ela pode ser usada de forma mal intencionada. Dá uma lida neste artigo bem interessante, que abrange esse assunto http://searchsecurity.techtarget.com/tip/Improper-error-handling

Mas de qualquer forma, com esse "padrão" você também pode retornar mensagens específicas. Exemplo:

if(empty($firstname)){
	throw new Exception("Informe o primeiro nome!");
}

if(strLen($firstname) < 3 || strLen($firstname) > 15){
	throw new Exception("O primeiro nome deve ter entre 3 e 15 caracteres!");
}
  
// etc...

aprendiz_ce · Junho 2, 2016

Stoma,

Antes de mais nada, muito obrigado pela sua determinação em me ajudar.

Pois é, eu também já usei algo semelhante assim conforme você recomenda, mas dessa forma caso o server-side falhe, eu estarei informando ao usuário algo genérico, e não exatamente o que ocorreu, ou seja, o campo que não foi preenchido de forma indevida. Eu já pensei em retornar um array/json completo indicando o que falhou e o que não falhou e conseguintemente mostra de forma correta para o usuário o ocorrido, mas penso que dessa forma o "remendo ficará maior que o soneto". O que você acha?

Pois é, queria algo seguro que mostrasse o que ocorre para o usuário tanto no CLIENT-SIDE como no SERVER-SIDE, mas de forma elegante e transparente para o mesmo. Mas parece que ainda não encontrei! Separadamente sei fazer, mas juntar os dois de forma satisfatória tá difícil (rs).

Mais uma vez obrigado pela sua atenção e se tiver algo a acrescentar não se furte.

Forte abraço!

Pois é, queria algo seguro que mostrasse o que ocorre para o usuário tanto no CLIENT-SIDE como no SERVER-SIDE, mas de forma elegante e transparente para o mesmo. Mas parece que ainda não encontrei! Separadamente sei fazer, mas juntar os dois de forma satisfatória tá difícil (rs).

Mais uma vez obrigado pela sua atenção e se tiver algo a acrescentar não se furte.

Forte abraço!

Stoma · Junho 3, 2016

O que você quer dizer com forma "elegante e transparente"? Elegante no código ou na apresentação (layout)? E com juntar os dois de forma satisfatória?

(quase) Tudo é possível, mas nem sempre é viável rs
Dá um exemplo de como seria desse jeito... ou passa algum site que faz como você quer...

aprendiz_ce · Junho 9, 2016

Quero dizer como isso... que quando o usuário "SUBMETA" a coisa seja feita dos dois lado (client-side/server-side) e que os alerta seja exibidos da mesma forma, ou seja, valida client e depois server, mas que para o usuário seja exibido de forma igual. Não importando aonde a VALIDAÇÃO foi feita. Seria isso!

Stoma · Junho 13, 2016

Não faz muito sentido porque que se a informação estiver incorreta, o usuário vai ser barrado pela validação client-side. Ou seja, a validação do server-side "nunca" vai ser usada, a não ser nos casos em que o usuário alterou o javascript e removeu a validação do jquery.validate. Mas nesse caso ele está tentando sabotar o sistema (por isso que precisa da validação server-side)! Não consigo imaginar um caso em que o usuário comum veja alguma mensagem de erro do server-side ao invés do client-side (só se a validação do client-side não estiver correta).

De qualquer forma, o que você quer fica complicado pois está usando uma biblioteca de terceiro, que não foi desenvolvida por você, então você teria que usar as opções que ela te dá ou então alterar o código fonte dela.

Olhando a documentação desse plugin, ele tem algumas opções que acho que você conseguiria utilizar para fazer isso:
https://jqueryvalidation.org/validate/
showErrors
errorPlacement

Entrar

Validar dados tanto client-side como server-side

Pergunta

Link para o comentário

Compartilhar em outros sites

16 respostass a esta questão

Posts Recomendados

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns