-4
Colleagues
I have this form:
<form method="post" name="form" id="formulario" action="javascript:func()">
<label>Razão social</label>
<span class="color-red">*</span>
<div class="row margin-bottom-20">
<div class="col-md-8 col-md-offset-0">
<input name="RazaoSocial" id="razaoSocial" class="form-control" type="text">
</div>
</div>
<label>CNPJ<span class="color-red">*</span></label>
<div class="row margin-bottom-20">
<div class="col-md-8 col-md-offset-0">
<input name="CNPJ" id="cnpj" class="form-control" type="text">
</div>
</div>
<label>Telefone comercial<span class="color-red">*</span></label>
<div class="row margin-bottom-20">
<div class="col-md-8 col-md-offset-0">
<input name="FoneComercial" id="foneComercial" class="form-control" type="text">
</div>
</div>
<label>Telefone celular<span class="color-red">*</span></label>
<div class="row margin-bottom-20">
<div class="col-md-8 col-md-offset-0">
<input name="FoneCelular" id="foneCelular" class="form-control" type="text">
</div>
</div>
<label>Nome do responsável<span class="color-red">*</span></label>
<div class="row margin-bottom-20">
<div class="col-md-8 col-md-offset-0">
<input name="NomeResponsavel" id="nomeResponsavel" class="form-control" type="text">
</div>
</div>
<label>Mensagem<span class="color-red">*</span></label>
<div class="row margin-bottom-20">
<div class="col-md-8 col-md-offset-0">
<textarea name="Mensagem" id="mensagem" rows="8" class="form-control"></textarea>
</div>
</div>
<p><button type="submit" name="btnEnviar" class="btn btn-primary">Enviar</button></p>
</form>
I’m using the bootstrap, so I call the function that way:
<script type="text/javascript" src="assets/js/jquery.min.js" ></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js" ></script>
<script type="text/javascript" language="javascript">
$(function($) {
// Quando o formulário for enviado, essa função é chamada
$("#formulario").submit(function() {
// Colocamos os valores de cada campo em uma váriavel para facilitar a manipulação
var razaoSocial = $("#razaoSocial").val();
var cnpj = $("#cnpj").val();
var foneComercial = $("#foneComercial").val();
var foneCelular = $("#foneCelular").val();
var nomeResponsavel = $("nomeResponsavel").val();
var mensagem = $("mensagem").val();
// Exibe mensagem de carregamento
$("#status").html("<img src='imagens/ajax-loader.gif' alt='Enviando' />");
// Fazemos a requisão ajax com o arquivo envia.php e enviamos os valores de cada campo através do método POST
$.post('enviar.php', {razaoSocial: razaoSocial, cnpj: cnpj, foneComercial: foneComercial, foneCelular: foneCelular, nomeResponsavel: nomeResponsavel, mensagem: mensagem }, function(resposta) {
// Quando terminada a requisição
// Exibe a div status
$("#status").slideDown();
// Se a resposta é um erro
if (resposta != false) {
// Exibe o erro na div
$("#status").html(resposta);
}
// Se resposta for false, ou seja, não ocorreu nenhum erro
else {
// Exibe mensagem de sucesso
$("#status").html("<span style=\"color:#006400\">Mensagem enviada com sucesso!</span>");
// Coloca a mensagem no div de mensagens
// Limpando todos os campos
$("#formulario").reset();
}
});
});
});
</script>
And finally, PHP:
<?php
if(filter_input(INPUT_POST,"btnEnviar")){
if(strlen(filter_input(INPUT_POST,"RazaoSocial")) < 5){
echo "A razão social não pode ser inferior a 5 caracteres";
}else if(strlen(filter_input(INPUT_POST,"CNPJ")) < 18){
echo "CNPJ inválido";
}else if(strlen(filter_input(INPUT_POST,"FoneComercial")) < 13){
echo "Telefone comercial inválido";
}else if(strlen(filter_input(INPUT_POST,"FoneCelular")) < 14){
echo "Telefone celular inválido";
}else if(strlen(filter_input(INPUT_POST,"NomeResponsavel")) < 5){
echo "O nome do responsável não pode ser inferior a 5 caracteres";
}else if(strlen(filter_input(INPUT_POST,"Mensagem")) < 5){
echo "A mensagem não pode ser inferior a 5 caracteres";
}else{
//
}
}
?>
Even sending with empty fields, the message "Message sent successfully" appears, IE, is not validating...
Probably because jquery returns true if the POST request is successful, independent of the validations you are making in PHP. Maybe you should check if the post request is true, and display the message, and return in php the "message sent successfully".
– user28595
Sorry Diego... I couldn’t understand...
– user24136
When you make a post via ajax, if the server to which you made the request does not return error, Ajax returns true, so it does not enter if. Take the test, for example, by informing an invalid PHP page in Ajax.
– user28595
@Jose.Marcos your ajax should return a json or else the content of the page should return a value that you can validate. ex: if the request is all right and returns 200 OK, the response variable will come with the content of the page you requested so if in PHP validation you return an "invalid CNPJ" string the return variable will have the content "Invalid CNPJ". Then it would be interesting to return a json like: {errors: true, messages: ["Invalid CNPJ",...]} hence in your js you get this: reposta.errors != false
– George Moura
It can return string as well as it is doing, just need to understand that the ajax sequence is from the request, not from the validation it does in php.
– user28595