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 this 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 the empty fields, the message "Message sent successfully" appears, that is, it is not validating ...