I have a problem that is the following I have a page page.php, which has some php includes includes pulling files that contains the structure of my form, which then sends to a page with message "success", on the desktop it works I have tried to validate the fields in html 5 using the required one, as I thought that was the problem. I deleted it and tried it in js, but nothing yet ... Here is the code I'm trying:
<div role="form" class="wpcf7" id="wpcf7-f728-p242-o1" lang="pt-BR" dir="ltr">
<div class="screen-reader-response"></div>
<form action="http://www.site.com.br/seguro-guincho-24-horas-recebido-com-sucesso" id="formulario" onsubmit="return calculo();" enctype="multipart/form-data" method="post" class="wpcf7-form">
<h2>Dados do Cliente</h2>
<p>Seu nome (obrigatório)<br />
<span class="wpcf7-form-control-wrap your-name">
<input type="text" name="nome" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" <?php /*?>required<?php */?> />
</span></p>
<p>Data de Nascimento<br />
<span class="wpcf7-form-control-wrap your-nascimento">
<input type="text" name="nascimento" value="" size="40" class="wpcf7-form-control wpcf7-text" />
</span></p>
<p>Seu CPF ou CNPJ (obrigatório)<br />
<span class="wpcf7-form-control-wrap your-cpf">
<input type="text" name="cpf" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" <?php /*?>required<?php */?> />
</span></p>
<p>Seu Endereço com número (obrigatório)<br />
<span class="wpcf7-form-control-wrap your-end">
<input type="text" name="endereco" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" <?php /*?>required<?php */?> />
</span></p>
<p>Complemento<br />
<span class="wpcf7-form-control-wrap your-comp">
<input type="text" name="complemento" value="" size="40" class="wpcf7-form-control wpcf7-text" />
</span></p>
<p>Seu Bairro (obrigatório)<br />
<span class="wpcf7-form-control-wrap your-bairro">
<input type="text" name="bairro" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" <?php /*?>required<?php */?> />
</span></p>
<p>Sua Cidade (obrigatório)<br />
<span class="wpcf7-form-control-wrap your-cidade">
<input type="text" name="cidade" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" <?php /*?>required<?php */?> />
</span></p>
<p>Seu Estado (obrigatório)<br />
<span class="wpcf7-form-control-wrap your-estado">
<input type="text" name="estado" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" <?php /*?>required<?php */?> />
</span></p>
<p>Seu Cep (obrigatório)<br />
<span class="wpcf7-form-control-wrap your-cep">
<input type="text" name="cep" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" <?php /*?>required<?php */?> />
</span></p>
<p>Seu Telefone (obrigatório)<br />
<span class="wpcf7-form-control-wrap your-tel">
<input type="text" name="telefone" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" <?php /*?>required<?php */?> />
</span></p>
<p>Telefone 2<br />
<span class="wpcf7-form-control-wrap your-tel2">
<input type="text" name="telefone2" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" />
</span></p>
<p>Seu e-mail (obrigatório)<br />
<span class="wpcf7-form-control-wrap your-email">
<input type="email" name="email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" <?php /*?>required<?php */?> />
</span></p>
<p>Como nos conheceu<br />
<span class="wpcf7-form-control-wrap menu-868">
<select name="outros" class="wpcf7-form-control wpcf7-select" aria-invalid="false">
<option value="Outros">Outros</option>
<option value="Indicação de Amigo">Indicação de Amigo</option>
<option value="Google">Google</option>
<option value="Yahoo">Yahoo</option>
<option value="MSN">MSN</option>
<option value="Facebook">Facebook</option>
<option value="Skype">Skype</option>
<option value="Renovação">Renovação</option>
</select>
</span></p>
<p>Obs:<br />
<span class="wpcf7-form-control-wrap your-message">
<textarea name="mensagem" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea"></textarea>
</span></p>
<h2>Dados do Veículo</h2>
<p>Marca (obrigatório)<br />
<span class="wpcf7-form-control-wrap marca">
<input type="text" name="marca" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" <?php /*?>required<?php */?> />
</span></p>
<p>Modelo (obrigatório)<br />
<span class="wpcf7-form-control-wrap modelo">
<input type="text" name="modelo" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" <?php /*?>required<?php */?> />
</span></p>
<p>Ano de Fabricação / Ano do modelo (obrigatório)<br />
<span class="wpcf7-form-control-wrap ano">
<input type="text" name="ano" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" <?php /*?>required<?php */?> />
</span></p>
<p>Cor (obrigatório)<br />
<span class="wpcf7-form-control-wrap cor">
<input type="text" name="cor" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" <?php /*?>required<?php */?> />
</span></p>
<p>Placa (obrigatório)<br />
<span class="wpcf7-form-control-wrap placa">
<input type="text" name="placa" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" <?php /*?>required<?php */?> />
</span></p>
<p>Chassi (obrigatório)<br />
<span class="wpcf7-form-control-wrap chassi">
<input type="text" name="chassi" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" <?php /*?>required<?php */?> />
</span></p>
<p>Combustível (obrigatório)<br />
<span class="wpcf7-form-control-wrap menu-372">
<select name="combustivel" class="wpcf7-form-control wpcf7-select">
<option value="Total Flex">Total Flex</option>
<option value="Gasolina">Gasolina</option>
<option value="Álcool">Álcool</option>
<option value="Diesel">Diesel</option>
<option value="Bio Diesel">Bio Diesel</option>
<option value="GNV">GNV</option>
<option value="Elétrico">Elétrico</option>
</select>
</span></p>
<h2>Aceite de Contrato</h2>
<p><span class="wpcf7-form-control-wrap contrato"><span class="wpcf7-form-control wpcf7-checkbox wpcf7-validates-as-required"><span class="wpcf7-list-item first last">
<input type="checkbox" name="contrato" value="Li as Condições Gerais da Assistência 24 horas para Guinchos e Aceito" <?php /*?>required<?php */?> />
<span class="wpcf7-list-item-label">Li as Condições Gerais da Assistência 24 horas para Guinchos e Aceito</span></span></span></span><br />
<a href="<?php echo site_url(''); ?>/plano-de-seguro-guincho-24-horas-pdf" target="_blank">Clique Aqui para ler as condições.</a> (Obrigatório)</p>
<p>
<input type="hidden" value="[email protected]" name="emaildestinatario" />
<input type="hidden" value="Formulário do Site - Guinchos" name="assunto" />
<input name="Submit" type="submit" class="campo-cinza" value="Contrate Com PagSeguro" tabindex="13"/>
</p>
</form>
</div>
<script>
function validaErroBranco(campo, mensagem) {
if (campo.value !== "") return true;
alert(mensagem);
campo.focus();
return false;
}
function calculo() {
var formulario = document.getElementById("formulario");
var valido = validaErroBranco(formulario.nome, "Preencha seu nome corretamente.")
&& validaErroBranco(formulario.email, "Preencha seu e-mail corretamente.")
&& validaErroBranco(formulario.telefone, "Preencha seu telefone corretamente.")
&& validaErroBranco(formulario.endereco, "Preencha seu endereço corretamente.")
&& validaErroBranco(formulario.cidade, "Preencha sua cidade corretamente.")
&& validaErroBranco(formulario.cpf, "Preencha o campo CPF.")
&& validaErroBranco(formulario.bairro, "Preencha o campo Bairro*.")
&& validaErroBranco(formulario.estado, "Preencha o campo Estado.")
&& validaErroBranco(formulario.cep, "Preencha o campo CEP.")
&& validaErroBranco(formulario.marca, "Preencha o campo Marca.")
&& validaErroBranco(formulario.modelo, "Preencha o campo Modelo.")
&& validaErroBranco(formulario.ano, "Preencha o campo Ano.")
&& validaErroBranco(formulario.cor, "Preencha o campo Cor.")
&& validaErroBranco(formulario.placa, "Preencha o campo Placa.")
&& validaErroBranco(formulario.chassi, "Preencha o campo Chassi.")
&& validaErroBranco(formulario.contrato, "Preencha o campo Contrato.");
if (!valido) return false;
}
</script>