0
Hi Good I have to make a code that validates a Form and I did all my code and when I went to see the validations did not enter I tried looking for errors and ways to solve and I myself could not find. Could someone help me make these validations work?
Code
<HTML>
<HEAD>
<meta charset='utf-8'/>
<script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
<script type="text/javascript" src="js/jquery.validate.js" ></script>
<script type="text/javascript" src="js/jquery.maskedinput.js" ></script>
<TITLE>Jquery</TITLE>
<script type="text/javascript">
$(document).ready(function() {
alert('seja bem vindo');
$("#formulario").validate({
rules:{
nome:{
required: true,
minlength: 2
},
data:{
required: true
},
endereco:{
required: true
},
bairro:{
required: true
},
cidade:{
required: true
},
estado:{
required: true
},
email:{
required: true,
email: true
},
telefone:{
required: true
},
login:{
required: true,
minlength: 6
},
senha:{
required: true,
minlength: 8
},
1senha:{
required: true,
minlength: 8
},
},
messages:{
nome:{
required: "Por favor, Preencha seu nome!",
minlegth: "Seu nome tem que ter 2 Letras ou mais!"
},
data:{
required: "Por favor, Informe sua data de nascimento!"
},
endereco:{
required: "Por favor, Informe seu Endereço!"
},
bairro:{
required: "Por favor, Informe seu Bairro!"
},
cidade:{
required: "Por favor, Informe sua Cidade!"
},
estado:{
required: "Por favor, Não deixe de Informar seu Estado!"
},
email:{
required: "Por favor, Preencha seu email!",
email: "E-mail inválido"
},
telefone:{
required: "Por favor, digite seu telefone!"
},
login:{
required: "Por favor, Escolhar um Login!",
minlength: "Seu login deve ter 6 ou mais digitos"
},
senha:{
required: "Por favor, Escolhar uma Senha!",
minlength: "Sua senha deve ter 8 ou mais digitos"
},
1senha:{
required: "Por favor, Escolhar uma Senha!",
minlength:" Sua confirmação de Senha deve ser igual a Senha"
},
}
});
});
</script>
</HEAD>
<BODY>
<form action="jquery.php" method="post" id="formulario">
<table id="formulario" border='5' align='center'>
<thead>
<th colspan='2'>Cadastro do Usuario</th>
<th><script language=javascript type="text/javascript">
now = new Date
document.write (""+now.getDate()+"/"+now.getMonth()+"/"+now.getFullYear () + "<br>")
document.write (now.getHours() + ":" + now.getMinutes(0) + ":" + now.getSeconds())
</script></th>
</thead>
<tbody>
<tr>
<td> Informe Seus Dados: </td>
</tr>
<tr>
<td> Nome: </td>
<td><input type="text" name='nome'/> </td>
</tr>
<tr>
<td> Data de Nascimento: </td>
<td><input type="text" name='data'/> </td>
</tr>
<tr>
<td> Endereço: </td>
<td><input type="text" name='endereco'/> </td>
</tr>
<tr>
<td> Bairro: </td>
<td><input type="text" name='bairro'/> </td>
</tr>
<tr>
<td> Cidade: </td>
<td><input type="text" name='cidade'/> </td>
</tr>
<tr>
<td> Estado: </td>
<td>
<select name="estado">
<option>Selecione...</option>
<option>Acre (AC)</option>
<option>Alagoas (AL)</option>
<option>Amapá (AP)</option>
<option>Amazonas (AM)</option>
<option>Bahia (BA)</option>
<option>Ceará (CE)</option>
<option>Distrito Federal (DF)</option>
<option>Espírito Santo (ES)</option>
<option>Goiás (GO)</option>
<option>Maranhão (MA)</option>
<option>Mato Grosso (MT)</option>
<option>Mato Grosso do Sul (MS)</option>
<option>Minas Gerais (MG)</option>
<option>Pará (PA)</option>
<option>Paraíba (PB)</option>
<option>Paraná (PR)</option>
<option>Pernambuco (PE)</option>
<option>Piauí (PI)</option>
<option>Rio de Janeiro (RJ)</option>
<option>Rio Grande do Norte (RN)</option>
<option>Rio Grande do Sul (RS)</option>
<option>Rondônia (RO)</option>
<option>Roraima (RR)</option>
<option>Santa Catarina (SC)</option>
<option>São Paulo (SP)</option>
<option>Sergipe (SE)</option>
<option>Tocantins (TO)</option>
</select></td>
</tr>
<tr>
<td> E-mail: </td>
<td><input type="text" name='email'/> </td>
</tr>
<tr>
<td> Telefone Celular: </td>
<td><input type="text" name='telefone'/> </td>
</tr>
<tr>
<td> Login: </td>
<td><input type="text" name='login'/> </td>
</tr>
<tr>
<td> Senha: </td>
<td><input type="text" name='senha'/> </td>
</tr>
<tr>
<td> Confirme a Senha: </td>
<td><input type="text" name='1senha'/> </td>
</tr>
<tr>
<td colspan='2' align='center'><input type="submit" value="Enviar" name="botão"/></td>
</tbody>
<tfoot>
<th colspan='3'> Envie seu Formulario </th>
</tfoot>
</table>
</form>
</BODY>
</HTML>
Question, why Voce does not use the required HTML5 input attribute??
<input type="text" required>for example?– leofontes
I’m sorry but I’m still beginner in this Area and my teacher didn’t get to that part. Could you tell me more about ??
– user77891
You have tags on you
<input>in your right HTML? If the only validation you need is that they are filled out (required), simply add them as you are already doing, and at the end before the end tag>placerequired, kind of:<input required>. Hence the browser itself validates for Windows and needs much less code jQuery ;)– leofontes
Thank you. But I also want a message to appear when you leave the space blank. I can add this message in the input itself ?
– user77891
Password:Starting by number, can Arnold? I’m just asking
– user60252
You can add < input type="text" name='email' required title="This field cannot be empty.">
– user60252
understood I’ll try then. Thanks for the help
– user77891
Leofontes and Leo Caracciolo thank you so much for your help you gave the code right here. My error was only in the word "1password" did not remind me that I could not start with number the Names.
– user77891
But if you could just help me one more time. how do I make it appear a warning when the Password confirmation is different from the Password using Jquery validation ???
– user77891