Dynamic field validation with Jquery.validate()

Question

I’m having difficulty validating the fields of a dynamic table using the plugin jquery.validate() where the input are sequential.

JS

$("#addLinha").on("click", function () { 
   // ADD QTD DE LINHAS INFORMADAS NO INPUP
   var n_prod = $("#n_prod").val(); 
   for ( var i = 0 ; i < n_prod ; i++ ) {
     contador++;
     var newRow = $("<tr>");
     var cols = "";

     cols += '<td class="contador" >' + contador + '</td>';
     cols += '<td><label text-align="center"><input class="produto" type="text" name="produto' + contador + '" /></label></td>';
     cols += '<td><label text-align="center"><input class="qtd spinner"     type="text" name="qtd' + contador + '"    onkeyup="somenteNumeros(this);"   /></label></td>';
     cols += '<td><label text-align="center"><input class="preco"   type="text" name="preco' + contador + '"  align="center" /></label></td>';
     cols += '<td class="col-md-2 total">R$ 0.00</td>';
     cols += '<td><a class="deleteLinha"> Excluir </a></td>';

     newRow.append(cols);

     $("#products-table").append(newRow);
  }
});

I tried to create the validation rules as follows, but it didn’t work as I expected:

$('#produto').validate({
   errorElement: 'div',
   errorClass: 'help-block',
   focusInvalid: true,
      rules: {
         for ( i = 1 ; i <= $('#hidden_linha').val() ; i++ ) {
            produto+i:{ required: true, maxlength: 100, minlength: 3 } 
         }
      }
});

Answer 1

Think about validating the form as a whole and treat the rules the elements you want to validate, so you apply the .validate() at the <form> and not directly to the element.

In your case involving the creation of <input /> dynamically remember that the plugin can only identify the elements to be validated if they already exist, so call the $(form).validate(); after the creation of the.

Another important factor is that you don’t need to create the same rule for each <input />.

As rules by default identify the elements by property name but the plugin allows you to create new rules, where you can identify and validate elements of a certain class for example:

jQuery.validator.addClassRules('produto', {
   required: true
});

Plugin documentation for future consultations.

Replying to the comment:

Yes, it is possible to customise both the message and its styling:

//Crio um método com mensagem costumizada
$.validator.addMethod("prodRequired", $.validator.methods.required,"Produto é obrigatório");

//Abaixo defino como será as mensagens de erro.
$("#formulario").validate({
   errorPlacement: function(label, element) {
     label.addClass('arrow');
     label.insertAfter(element);
   },
   wrapper: 'span'
});

Sources:

• https://stackoverflow.com/questions/3247305/how-to-add-messages-to-a-class-with-addclassrules

• https://stackoverflow.com/questions/14913677/jquery-validation-plugin-message-style

Working example:

var contador = 0;

//Cria um método com mensagem.
$.validator.addMethod("prodRequired", $.validator.methods.required,
"Produto é obrigatório");

//Regra para a classe produto
jQuery.validator.addClassRules('produto', {
    prodRequired: true
});
    
$("#addLinha").on("click", function () { 
  // ADD QTD DE LINHAS INFORMADAS NO INPUP
  var n_prod = $("#n_prod").val(); 
  for ( var i = 0 ; i < n_prod ; i++ ) {
    contador ++;

    var newRow = $("<tr>");
    var cols = "";

    cols += '<td class="contador" >' + contador + '</td>';
    cols += '<td><label text-align="center"><input class="produto" type="text" name="produto' + contador + '" /></label></td>';
    cols += '<td><label text-align="center"><input class="qtd spinner"     type="text" name="qtd' + contador + '"    onkeyup="somenteNumeros(this);"   /></label></td>';
    cols += '<td><label text-align="center"><input class="preco"   type="text" name="preco' + contador + '"  align="center" /></label></td>';
    cols += '<td class="col-md-2 total">R$ 0.00</td>';
    cols += '<td><a class="deleteLinha"> Excluir </a></td>';

    newRow.append(cols);

    $("#products-table").append(newRow);
  }

  //Abaixo defino como será as mensagens de erro.
  $("#formulario").validate({
    errorPlacement: function(label, element) {
          label.addClass('arrow');
          label.insertAfter(element);
      },
      wrapper: 'span'
  });
  
});

span.arrow {
    margin-left: 6px;
    height:17px;
    background: url('http://i45.tinypic.com/f9ifz6.png') no-repeat left center;
}
label.error {
    height:17px;
    border-top:1px solid #99182c;
    border-right:1px solid #99182c;
    border-bottom:1px solid #99182c;
    margin-left:9px;
    padding:1px 5px 0px 5px;
    font-size:small;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>


<form id="formulario">
  <div>
    <input type="number" id="n_prod" name="n_prod" min="1" value="1" />
    <button type="button" id="addLinha">
      Adicionar Linha
    </button>
  </div>
  <div>
    <table id="products-table">
    </table>
  </div>
  <div>
    <button type="submit" id="enviar" name="enviar">
      Enviar
    </button>
  </div>
</form>