jQuery validation plugin not working as it should

Question

I'm working on a form validation with the jQuery validation plug-in and it's not working properly.

When I try to validate the form it just reloads the page and nothing happens. The only time i get a result is when i have the "required" in one of my input tags, but as I already have the rules and messages, they should be working fine

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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js" integrity="sha512-rstIgDs0xPgmG6RX1Aba4KV5cWJbAMcvRCVmglpam9SoHZiUCyQVDdH2LPlxoHtrv17XWblE/V/PP+Tr04hbtA==" crossorigin="anonymous" referrerpolicy="no-referrer"></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>

Answer 1

As per documentation, the plugin requires that all the input fields should contain a name attribute. When specifying the rules and messages inside .validate() function, you should use the name attribute.