Form validation with javascript

Asked

Viewed 107 times

1

I’m trying to validate a form with javascript using the event onsubmit but, only when I do the validation it does not alert and sends the data in the same way and from what I am seeing there is nothing wrong in it on the console, so I realized that it’s jumping my if, what wasn’t supposed to happen and he’s apparently right, so he wanted someone’s help to follow the code html and then the 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;
    }



}
javascript

2 answers

0


In your JS is written lenght and the right thing is length:

function validar(){

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

  • friend was just that I was not getting changed but,it ta sending form the same way even returning false

  • The problem has been solved?

  • was solved as I close the topical?

  • If any answer quallifique as correct, you mark as correct, or you can answer your question.

0

In fact the onsubmit does not work without the preventDefault I believe the right thing would be...

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.
    }
}

For better definition of preventDefault: Question by Sopt

  • Thank you guy the problem of not being appearing Alert was the wrong written length even and onsubmit was only by onsubmit="Return validate()"

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.