I’m working on a form validation with the jQuery validation plug-in and it’s not working properly.
I tried everything but can’t find where I’m doing wrong
Also I have two forms, but I’m showing only the first form’s code because they are pretty much the same
I already checked my link tags, but they don’t seems to be wrong at all
$().ready(function() {
$("#formFisica").validate({
onkeyup: false,
onfocusout: false,
rules: {
nomeFisica: {
required: true,
},
cpfFisica: {
required: true,
number: true,
maxlength: 11
},
dddFisica: {
required: true,
number: true,
maxlength: 2
},
telFisica: {
required: true,
number: true,
maxlength: 9
},
emailFisica: {
required: true,
email: true
},
confEmailFisica: {
required: true,
equalTo: "#emailFisica"
},
senhaFisica: {
required: true,
minlength: 6,
maxlength: 15
},
confSenhaFisica: {
required: true,
equalTo: "#senhaFisica"
},
},
messages: {
nomeFisica: {
required: "Esse campo não pode ser vazio"
},
cpfFisica: {
required: "Esse campo não pode ser vazio",
number: "Esse campo só aceita números",
},
dddFisica: {
required: "Esse campo não pode ser vazio",
number: "Esse campo só aceita números",
},
telFisica: {
required: "Esse campo não pode ser vazio",
number: "Esse campo só aceita números",
},
emailFisica: {
required: "Esse campo não pode ser vazio",
email: "Digite um endereço de e-mail valido"
},
confEmailFisica: {
required: "Esse campo não pode ser vazio",
equalTo: "Os e-mails não correspondem"
},
senhaFisica: {
required: "Esse campo não pode ser vazio"
},
confSenhaFisica: {
required: "Esse campo não pode ser vazio",
equalTo: "As senhas não correspondem"
},
}
});
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container text-center">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" value="" id="flexCheckDefaultFisica">
<label for="flexCheckDefaultFisica" class="form-check-label">Pessoa Física</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" value="" id="flexCheckDefaultJuridica">
<label for="flexCheckDefaultJuridica" class="form-check-label">Pessoa Jurídica</label>
</div>
</div>
</div>
<div class="container pt-2" id="containerFisica">
<form id="formFisica">
<div class="form-group pt-2 pb-2">
<label for="exampleInputEmail1">Nome completo</label>
<input type="text" class="form-control" id="nomeFisica" aria-describedby="emailHelp" placeholder="Insira seu nome" required/>
</div>
<div class="form-group pt-2 pb-2">
<label for="exampleInputPassword1">CPF</label>
<input type="number" class="form-control" id="cpf" placeholder="Insira seu CPF" />
</div>
<div class="form-group pt-2 pb-2">
<label for="exampleInputPassword1">DDD</label>
<input type="number" class="form-control" id="dddFisica" placeholder="DDD" />
</div>
<div class="form-group pt-2 pb-2">
<label for="exampleInputPassword1">Telefone</label>
<input type="number" class="form-control" id="telFisica" placeholder="Número de telefone" />
</div>
<div class="form-group pt-2 pb-2">
<label for="exampleInputEmail1">E-mail</label>
<input type="email" class="form-control" id="emailFisica" aria-describedby="emailHelp" placeholder="Insira seu e-mail" />
</div>
<div class="form-group pt-2 pb-2">
<label for="exampleInputEmail1">Confirmar E-mail</label>
<input type="email" class="form-control" id="confEmailFisica" aria-describedby="emailHelp" placeholder="Confirme seu e-mail" />
</div>
<div class="form-group pt-2 pb-2">
<label for="exampleInputPassword1">Senha</label>
<input type="password" class="form-control" id="senhaFisica" placeholder="Insira sua senha" />
</div>
<div class="form-group pt-2 pb-2">
<label for="exampleInputPassword1">Confirmar Senha</label>
<input type="password" class="form-control" id="confSenhaFisica" placeholder="Confirme sua senha" />
</div>
<div class="form-check pt-2">
<input type="radio" class="form-check-input" id="aceitoEmailFisica" />
<label class="form-check-label" for="aceitoEmailFisica">Aceito receber e-mails</label>
</div>
<div class="form-check pt-2">
<input type="radio" class="form-check-input" value="" id="flexCheckChecked" checked/>
<label class="form-check-label" for="flexCheckChecked">Aceito as políticas de privacidade</label>
</div>
<input type="submit" value="Validate!" />
</form>
</div>
<div class="container pt-2" id="containerJuridica">
<form id="formJuridica">
<div class="form-group pt-2 pb-2">
<label for="exampleInputEmail1">Razão Social</label>
<input type="text" class="form-control" id="razaoSocial" aria-describedby="emailHelp" placeholder="Razão Social" required>
</div>
<div class="form-group pt-2 pb-2">
<label for="exampleInputPassword1">CNPJ</label>
<input type="number" class="form-control" id="cnpj" placeholder="Insira seu CNPJ">
</div>
<div class="form-group pt-2 pb-2">
<label for="exampleInputPassword1">DDD</label>
<input type="number" class="form-control" id="dddJuridica" placeholder="DDD">
</div>
<div class="form-group pt-2 pb-2">
<label for="exampleInputPassword1">Telefone</label>
<input type="number" class="form-control" id="telJuridica" placeholder="Número de telefone">
</div>
<div class="form-group pt-2 pb-2">
<label for="exampleInputEmail1">E-mail</label>
<input type="email" class="form-control" id="emailJuridica" aria-describedby="emailHelp" placeholder="Insira seu e-mail">
</div>
<div class="form-group pt-2 pb-2">
<label for="exampleInputEmail1">Confirmar E-mail</label>
<input type="email" class="form-control" id="confEmailJuridica" aria-describedby="emailHelp" placeholder="Confirme seu e-mail">
</div>
<div class="form-group pt-2 pb-2">
<label for="exampleInputPassword1">Senha</label>
<input type="password" class="form-control" id="senhaJuridica" placeholder="Insira sua senha">
</div>
<div class="form-group pt-2 pb-2">
<label for="exampleInputPassword1">Confirmar Senha</label>
<input type="password" class="form-control" id="confSenhaJuridica" placeholder="Confirme sua senha">
</div>
<div class="form-check pt-2">
<input type="radio" class="form-check-input" id="aceitoEmailJuridica">
<label class="form-check-label" for="aceitoEmailJuridica">Aceito receber e-mails</label>
</div>
<div class="form-check pt-2">
<input type="radio" class="form-check-input" value="" id="flexCheckChecked" checked>
<label class="form-check-label" for="flexCheckChecked">Aceito as políticas de privacidade</label>
</div>
<input type="submit" value="Validar">
</form>
</div>
<script src="./validation.js" type="text/javascript"></script>
<script src="./script.js" type="text/javascript"></script>