1

Estou tentando validar um formulário com javascript usando o evento onsubmit mas, só que quando eu faço a validação ele não da o alerta e envia os dados da mesma forma e pelo que eu estou vendo não tem nada de erro nele no console, então eu percebi que ele ta pulando meu if, o que não era para acontecer e ele ta aparentemente certo, então queria a ajuda de alguém segue o código html e em seguida o js:

HTML

<?php 
include "index.php";



 ?>


<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Title Page</title>

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
        <script src="validar.js" type="text/javascript" charset="utf-8"></script>

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <form action="inserir-dados.php" method="post" name="form" onSubmit="validar();">

            <table border="0" class="table table-responsive">
                <tr></tr>
                <td>Nome <input type="text" name="nome" id="Cnome" maxlength="32"  placeholder="Nome da pessoa" size="58" required></td>
            </tr>

            <tr>
                <td>Idade <input type="number" name="idade" id="Cidade"  placeholder="Idade da pessoa" required></td>
            </tr>
            <tr>
                <td>Telefone <input type="number" name="telefone" id="Ctelefone"   placeholder="XXX-XXXX-XXXX" required>
                </td>
            </tr>
            <tr>
                <td>Endereço <input type="text" name="endereço" id="Cendereço" maxlength="34"   placeholder="Endereço da pessoa"
                    required> </td>
                </tr>
                <tr>
                    <td>Cidade <input type="text" name="cidade" id="Ccidade" maxlength="24"    placeholder="Cidade da pessoa" required> </td>
                </tr>
                <tr>
                    <td>Estado</td>
                </tr>
                <tr>
                    <td>
                        <select class="btn btn-default" name="estado" id="Cestado">
                            <option>SP</option>
                            <option>MG</option>
                            <option>RJ</option>
                            <option>SC</option>
                            <option>BA</option>
                            <option>CE</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td><input type="submit" value="Enviar"class="btn btn-primary"><input type="reset" Value="Limpar" class="btn btn-danger"></td>

                </tr>


            </table>

        </form>

        <!-- jQuery -->
        <script src="//code.jquery.com/jquery.js"></script>
        <!-- Bootstrap JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
        <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->

    </body>
</html>

JS

function validar(){

    if(document.form.telefone.value.lenght <11){
        alert("Esse campo precisa de 11 caracteres");
        document.form.telefone.focus();
        return false;
    }



}

2 Respostas 2

0

No seu JS esta escrito lenght e o correto é length:

function validar(){

    if(document.form.telefone.value.length < 11){
        alert("Esse campo precisa de 11 caracteres");
        document.form.telefone.focus();
        return false;
    }
}
4
  • amigo era isso mesmo que nao tava pegando mudei mas,ele ta enviando formulario da mesma forma mesmo retornando false Commented 29/04/2019 às 15:28
  • O problema foi resolvido? Commented 29/04/2019 às 17:12
  • foi resolvido como eu fecho o topico? Commented 29/04/2019 às 19:44
  • Se alguma resposta se quallificar como correta, vc marca como correta, ou vc pode responder sua pergunta. Commented 29/04/2019 às 19:49
0

Na real o onsubmit não funciona sem o preventDefault Acredito Eu que o correto seria...

function validar(e){
    //o preventDefault, evita que o botão não siga seu fluxo padrâo. ou seja evita      
    //que um submit "submita" o formulário.
    e.preventDefault();
    if(document.form.telefone.value.length <11){
        alert("Esse campo precisa de 11 caracteres");
        document.form.telefone.focus();
        return false;
    }else{
     //peguei o formulário por um id e use o onSubmit no formulário.
    }
}

Para melhor definição do preventDefault: Pergunta do SOpt

1
  • Obrigado cara o problema de nao estar aparecendo o alert era o length escrito errado mesmo e o onsubmit era so por onSubmit="return validar()" Commented 29/04/2019 às 15:55

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 .