Как я могу объединить jquery строк в функции?

Question

Итак, у меня есть функция, которая проверяет вводимые данные в форму, и я заметил, что у меня много вопросов, поэтому я хотел автоматизировать ее, а не вводить вручную. Итак, я создал для l oop значение от 1 до 25, и он работает. Но я хочу добавить i к 'q', чтобы мне не приходилось набирать 'q1', 'q2', 'q3' ... Но я просто не могу сложить их вместе.

Вот мой код:

$(function () { 
    for (var i = 1; i <= 25; i++) {
        console.log(i);
        $('#form_validation').validate({
            rules: {
                'checkbox': {
                    required: true
                },
                'q' + i: {
                    required: true
                }
            },
            highlight: function (input) {
                $(input).parents('.form-line').addClass('error');
            },
            unhighlight: function (input) {
                $(input).parents('.form-line').removeClass('error');
            },
            errorPlacement: function (error, element) {
                $(element).parents('.form-group').append(error);
            }
        });
    }
});

Так что я не знаю как, и надеюсь, что вы мне поможете.

Answer 1

Вы должны использовать для этого класс через jQuery.validator.addClassRules

$(function() {
  var myform = $('#form_validation');
  jQuery.validator.addClassRules("question", {
    required: true
  });
  $.validator.messages.required = 'Well, we need to know';
  var myvalidator = $('#form_validation').validate({
    rules: {
      'checkbox': {
        required: true
      }
    },
    highlight: function(input) {
      $(input).parents('.form-line').addClass('error');
    },
    unhighlight: function(input) {
      $(input).parents('.form-line').removeClass('error');
    },
    errorPlacement: function(error, element) {
      $(element).closest('.form-group').append(error);
    }
  });
  $("#dovalidate").on("click", function(e) {
    myform.validate();
    myvalidator.form();
  });

});

.error {
  background-color: #ffffdd;
}

<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.1/jquery.validate.js"></script>
<form id="form_validation">
  <div class="form-group">
    <div class="form-line">
      <input name="question1" class="question" type="text" />
    </div>
  </div>
  <div class="form-group">
    <div class="form-line">
      <input name="question2" class="question" type="text" value="I got this" />
    </div>
  </div>
  <div class="form-group">
    <div class="form-line">
      <input name="question3" class="question" type="text" data-msg="WOOPS fill this field" />
    </div>
  </div>
  <div class="form-group">
    <div class="form-line">
      <input name="question4" required class="question" type="text" />
    </div>
  </div>
  <div class="form-group">
    <div class="form-line">
      <input name="question5" class="question" type="text" value="Just GREAT" />
    </div>
  </div>
  <div class="form-group">
    <div class="form-line">
      <input name="question6" class="question" type="text" />
    </div>
  </div>
  <div class="form-group">
    <div class="form-line">
      <input name="question7" class="question" type="text" data-msg="What?" data-msg="What?" />
    </div>
  </div>


  <div class="form-line">
    <input type="checkbox" name="needcheese" />
    <input type="checkbox" name="needcheese" />
    <input type="checkbox" name="needcheese" />
    <input type="checkbox" name="needcheese" />
  </div>

</form>
<button id="dovalidate">Validate this</button>