V.code V.code - 7 months ago 16
Javascript Question

validate.js new rule add count validate

I use jquery ui validate.js . my html form code:

<tbody id="add_end">
<tr>
<td><input type="text" name="m_player[]" id="player"></td>
<td><input type="text" name="m_role[]" id="role"></td>
<td><i class="green fa fa-plus"></i></td>
</tr>
</tbody>


jquery normal code append and remove.

$(document).ready(function(){
var x = 1;
var max_x = 10;
$('.green').click(function(){

if(x < max_x){
x++;
$('#add_end').append('<tr class="add"><td><input type="text" name="m_player[]" id=""></td><td><input type="text" name="m_role[]" id=""></td><td><i class="remove fa fa-minus"></td></tr>');
}
});
$('#add_end').on("click",".remove",function(){
$(this).closest('tr').fadeOut(300,function(){ $(this).remove();});
x--;
});
});


To this step the codes are working.
I want count tag or input, and minimum 2 or 3 validate . how to use validate.js?

Answer

If you only want to validate that there is minimum of 3 inputboxes for example you can do like in the snippet below.

Then you don't need to use validate.js that also require nood.js and grunt. Here I have a label that will show if you click on submit and there are less the 3 inputboxes.

$(document).ready(function() {
  var x = 1;
  var max_x = 10;
  $('.green').click(function() {
    if (x < max_x) {
      x++;
      $('#add_end').append('<tr class="add"><td><input type="text" name="m_player[]" id=""></td><td><input type="text" name="m_role[]" id=""></td><td><i class="remove fa fa-minus"></td></tr>');
    }
  });

  $('#add_end').on("click", ".remove", function() {
    $(this).closest('tr').fadeOut(300, function() {
      $(this).remove();
    });
    x--;
  });

  $('input[type=button]').click(function() {
    if (x < 3) {
      $('lable').show();
    } else {
      $('lable').hide();
    }
  })
})
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tbody id="add_end">
    <tr>
      <td>
        <input type="text" name="m_player[]" id="player">
      </td>
      <td>
        <input type="text" name="m_role[]" id="role">
      </td>
      <td><i class="green fa fa-plus"></i></td>
    </tr>
  </tbody>
</table>

<input type='button' value="submit" />
<lable style="display: none; color: red">You need minimum 3 inputboxes</lable>