How can I concatenate jquery strings in a function?

Question

So I have a function that validates form inputs and I noticed I had many questions so I wanted to automate it instead of typing it manually. So I created a for loop that goes from 1 to 25 and it works. But I want to add the i to 'q' so I won't have to type 'q1', 'q2', 'q3'... But I just can't add them together.

Here's my code:

$(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);
            }
        });
    }
});

So I don't really know how and I hope you could help me.

Mark Schultheiss · Accepted Answer · 2020-05-08 12:26:06Z

You should use a class for this via 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>

Collectives™ on Stack Overflow

How can I concatenate jquery strings in a function?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related