Validação de formulário com javascript

Front-end JavaScript
#1

Olá, pessoal. Estou começando os estudos de front-end na facauldade e to tentando fazer um pequeno programa pra validação de formulario usando javascript, mas nao consigo achar onde está meu erro. É um código bem simples, mas quando deixo o formulário em branco e envio, nada acontece.

Form no html:

<html>

<head>
    <meta charset="utf-8"/>
    <title> Formulario </title>
    <script text="text/javascript" href="cadastro.js"></script>
</head>

<body>
    <form id="register" method="post" onsubmit="validacao();">
        <fieldset id="cadastrar">
            <legend> Cadastro </legend>
            
            <label for="nome"> Nome </label> 
            <input type="text" name="nome"/>
            
            <label for="telefone"> Telefone </label> 
            <input type="tel" name="telefone"/>
            
            <label for="email"> Email </label>
            <input type="email" name="email"/>
            
            <label for="usuario"> Nome de usuário </label>
            <input type="text" name="usuario"/>
            
            <label for="senha"> Senha </label>
            <input type="password" name="senha"/>
            
            <label for="senharep"> Digite a senha novamente</label>
            <input type="password" name="senharep"/>
            
            <button type="submit" name="enviar"> Cadastrar </button>
        </fieldset>
    </form>
</body>

</html>

A seguir o arquivo JS:

function validacao() {
    var formulario = document.getElementById("register");
    var nome = formulario.nome;
    var email = formulario.email;

    if (nome.value == "") {
        alert("Insira um nome válido.");
        return false;
    }

    if(email.value.indexOf("@") == -1 || email.value.indexOf(".") == -1) {
        alert("Insira um email válido");
        return false;
    }
}
#2

Mude o onsubmit do seu form para:

onsubmit="return validacao();"

O return serve para utilizar o valor retornado pela função validacao(), true ou false, para impedir ou deixar a requisição acontecer.

#3

Obrigado pela resposta, amigo.

Contudo, já havia testado isso antes e mesmo assim continua não funcionando.

#4

Segue código que montei funcionando:

<html>

<head>
    <meta charset="utf-8"/>
    <title> Formulario </title>
    <script text="text/javascript">
        function validacao() {
            var formulario = document.register;
            var nome = formulario.nome;
            var email = formulario.email;

            if (nome.value == "") {
                alert("Insira um nome válido.");
                return false;
            }

            if(email.value.indexOf("@") == -1 || email.value.indexOf(".") == -1) {
                alert("Insira um email válido");
                return false;
            }
            
            return true;
        }
    </script>
</head>

<body>
    <form name="register" method="post" onsubmit="return validacao();" novalidate>
        <fieldset id="cadastrar">
            <legend> Cadastro </legend>
            
            <label for="nome"> Nome </label> 
            <input type="text" name="nome"/>
            
            <label for="telefone"> Telefone </label> 
            <input type="tel" name="telefone"/>
            
            <label for="email"> Email </label>
            <input type="email" name="email"/>
            
            <label for="usuario"> Nome de usuário </label>
            <input type="text" name="usuario"/>
            
            <label for="senha"> Senha </label>
            <input type="password" name="senha"/>
            
            <label for="senharep"> Digite a senha novamente</label>
            <input type="password" name="senharep"/>
            
            <button type="submit" name="enviar"> Cadastrar </button>
        </fieldset>
    </form>
</body>

</html>
#5

Bom, seu código funcionou aqui e com isso percebi que o problema no programa é fazendo href no arquivo JS.

Quando coloco a função dentro do arquivo, não funciona, mas quando coloco ela dentro de no próprio HTML, funciona normalmente.

O que pode ser ?

#6

Eita, nem tinha reparado que você usou href para importar o arquivo JS. O correto é usar src, assim:

<script text="text/javascript" src="cadastro.js"></script>

href é para importar arquivos CSS.

1 curtida
#7

Agora sim funcionou !!!

Obrigado pela atenção