Jquery validation using array in the Names input?

Question

I am making the following form for the registration of data in the database, to enter in the database I am using array us input names form.

<form method="post" id="validar" action="?classe=Clientes&acao=create">
  <div class="form-group">
    <label for="nome_cliente">Nome</label>
    <input type="text" class="form-control" id="nome_cliente" placeholder="Digite o Nome" name="clientes[nome_cliente]">
  </div>
  <div class="form-group">
    <label for="email_cliente">Email</label>
    <input type="email_cliente" class="form-control" id="email_cliente" placeholder="Digite o E-mail" name="clientes[email_cliente]">
   </div>
  <div class="form-group">
    <label for="telefone_cliente">Telefone</label>
    <input type="text" class="form-control" id="telefone_cliente" placeholder="Digite o Telefone" name="clientes[telefone_cliente]">
  </div>
  <div class="form-group">
    <label for="senha_cliente">Senha</label>
    <input type="password" class="form-control" id="senha_cliente" placeholder="Digite a Senha" name="clientes[senha_cliente]">
  </div>
  <div class="form-group">
    <label for="data_nasc_cliente">Data de Nascimento</label>
    <input type="date" class="form-control" id="data_nasc_cliente" placeholder="Digite a Data de Nascimento" name="clientes[data_nasc_cliente]">
  </div>
  <button type="submit" class="btn btn-success">Cadastrar</button>
</form>

and I need to validate the fields using jquery validate, only to use jquery validate it takes the input name to validate.

<script>
    $("#validar").validate({
        rules:{
            clientes['nome_cliente']:{
                required:true
            }                             
        },
        messages:{
            clientes['nome_cliente']:{
                required:"Por favor, informe seu nome"
            }
        }    
    });
</script>

I tried several ways, but I could not in any of them do the validation with the array in the name?

Answer 1

You need to put the name between double quotes in your case for validation to occur because it is a different type from the standard, example:

$(document).ready(function() {
  $("#form1").validate({
    rules: {
      "clientes[nome_cliente]": {
        required: true
      }
    },
    messages: {
      "clientes[nome_cliente]": {
        required: "Por favor, informe seu nome"
      }
    }
  });
});

<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.0/jquery.validate.min.js"></script>

<form name="form1" id="form1">
  <input type="text" id="nome" name="clientes[nome_cliente]" />
  <button>Verificar</button>
</form>

Ref. How to validate array of inputs using validate plugin jquery