Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Bianka__As

Validar formulário com mensagem- Jquery

Por , em Javascript

Recommended Posts

Bianka__As    0

Bianka__As
Postado

Queria que quando eu apertasse o botão de enviar aparecesse um alerta "Sucesso!". Criei Uma função simples e atribui ao evento onClick, mas aparece uma mensagem mesmo que campos que estejam em branco ou com quantidade errada de caracteres determinados. Essa Mensagem só deve aparecer quando o formulário for preenchido corretamente.

 

 

<! DOCTYPE html>
<html>
<head>
<title> Validação </ title>
<meta charset = "utf-8">
<link rel = "stylesheet" type = "text / css" href = "../ css / style.css">
<script type = "text / javascript" src = "../ js / jquery.min.js"> </ script>
<script type = "text / javascript" src = "../ js / jquery.maskedinput.js"> </ script>
<script type = "text / javascript" src = "../ js / jquery.validate.js"> </ script>
<script type = "text / javascript">
$ (function formulario () {
$ ("# data").mask ("99/99/9999");
$ ("form#cadastro").validate ({
rules: {
nome: {
required: true,
minlength: 5
}
},
messages: {
nome: {
required: "Campo Obrigatório.",
minlength: "O campo DEVE Conter No Mínimo 5 caracteres"
}
}
});
return false;
});
function msg () {
alert ("Sucesso!");
}
</ script>
</ head>
<body>
<form id = "cadastro">
Nome <br>
<input type = "text" name = "nome" ><br>
Dados <br>
<input type = "text" name = "data" id = "data"> <br>
<input type = "submit" value = "Cadastro" onClick = "msg ();">
</ form>
</ body>
</ html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Sergio Tomas    16

Sergio Tomas
Postado

Bianca, coloque a função msg(); em seu formulario assim:

<form id = "cadastro" onSubmit="return msg();">
  Nome <br>
<input type = "text"  name = "nome" ><br>
Dados <br>
<input type = "text" name = "data" id = "data"> <br>
 
<input type = "submit"  value = "Cadastro"> 
</form>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bianka__As    0

Bianka__As
Postado

 

Bianca, coloque a função msg(); em seu formulario assim:

<form id = "cadastro" onSubmit="return msg();">
  Nome <br>
<input type = "text"  name = "nome" ><br>
Dados <br>
<input type = "text" name = "data" id = "data"> <br>
 
<input type = "submit"  value = "Cadastro"> 
</form>

Deu o mesmo erro, mesmo que nada seja preenchido aparece a mensagem

Compartilhar este post

Link para o post
Compartilhar em outros sites

Sergio Tomas    16

Sergio Tomas
Postado

Bianca, o problema é que tem varios erros de sintaxe no seu código, você está ponto espaço entro: $ e a função, tenta usar assim:

<script type="text/javascript">
 

        $("#data").mask ("99/99/9999"); 
 
        $("form#cadastro").validate({
                rules: {
                        nome: {
                                required: true,
                                minlength: 5
                        }
                },
                messages: {
                        nome: {
                                required: "Campo Obrigatório.",
                                minlength: "O campo DEVE Conter No Mínimo 5 caracteres"
                        }
                }
        });

function msg() {
        alert ("Sucesso!");
}
</script>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bianka__As    0

Bianka__As
Postado

 

Bianca, o problema é que tem varios erros de sintaxe no seu código, você está ponto espaço entro: $ e a função, tenta usar assim:

<script type="text/javascript">
 

        $("#data").mask ("99/99/9999"); 
 
        $("form#cadastro").validate({
                rules: {
                        nome: {
                                required: true,
                                minlength: 5
                        }
                },
                messages: {
                        nome: {
                                required: "Campo Obrigatório.",
                                minlength: "O campo DEVE Conter No Mínimo 5 caracteres"
                        }
                }
        });

function msg() {
        alert ("Sucesso!");
}
</script>

Esse espaços só apareceram quando colei o código aqui, já verifiquei e não tem no documento. O que eu preciso saber é como fazer essa mensagem aparecer apenas quando as regras de preenchimento forem seguidas corretamente. A mascara e a validação estão dando certo, é só a questão da mensagem

Compartilhar este post

Link para o post
Compartilhar em outros sites

Sergio Tomas    16

Sergio Tomas
Postado

Bianca tente colocar a chamada da função "msg()" em um atributo action de seu formulario, desta maneira:

<form id="cadastro" action="javascript:msg();" method="post">
  Nome <br>
<input type = "text"  name = "nome" ><br>
Dados <br>
<input type = "text" name = "data" id = "data"> <br>
 
<input type = "submit"  value = "Cadastro"> 
</form>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bianka__As    0

Bianka__As
Postado

 

Bianca tente colocar a chamada da função "msg()" em um atributo action de seu formulario, desta maneira:

<form id="cadastro" action="javascript:msg();" method="post">
  Nome <br>
<input type = "text"  name = "nome" ><br>
Dados <br>
<input type = "text" name = "data" id = "data"> <br>
 
<input type = "submit"  value = "Cadastro"> 
</form>

Agora sim, resolvido. Obrigada!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito