How to validate array of array inputs Jquery? [duplicate]

Question

How do we validate array of array input boxes using jquery validation plugin?

Below is html code.

<form id="transport-form">
  <div class="form-group>
    <label> Room1</label>
    <input type="text name="child[0]" value="2">
    <input type="text" name="age[0][]">
    <input type="text" name="age[0][]">
  </div>
  <div class="form-group>
    <label> Room2</label>
    <input type="text name="child[1]" value="2">
    <input type="text" name="age[1][]">
    <input type="text" name="age[1][]">
  </div>
  <input type="submit value="submit">
</form>

I have no of child input child[*] and accept to each children an age. If I input 2 children there age need to be filled mandatory.

and jquery code is below

jQuery("#transport-form").validate({
        rules: {
            'age[*][]': {
                required: function(element){
                            check age is between 1 to 12 
                        }
            }
        },
    });

How to validate array of inputs using validate plugin jquery — Death-is-the-real-truth
– Death-is-the-real-truth, Commented Jul 5, 2024 at 6:17

mplungjan · Accepted Answer · 2024-07-05 06:35:59Z

Be careful with missing quotes.

<div class="form-group">

Try this. It adds generic rules to all current age inputs (name starting with age[ ) - alternatively give the age inputs a class and use that as selector instead

$(() => {

  $("#transport-form").validate({ ...  }); // your existing validation

  $('input[name^="age["]').each(function() {
    $(this).rules('add', {
      required: true,
      range: [1, 12],
      messages: {
        required: "Please enter the age for all children.",
        range: "Age must be between 1 and 12."
      }
    });
  });
});

If you wish, you can add room number:

$('input[name^="age["]').each(function() {
  const inputElement = $(this); // Capture the input element
  inputElement.rules('add', {
    required: true,
    range: [1, 12],
    messages: {
      required: function() {
        // Find the index of the closest .form-group relative to its siblings
        let index = inputElement.closest('.form-group').index() + 1; // 0 based index
        return `Please enter the age for children in room ${index}`;
      },
      range: "Age must be between 1 and 12."
    }
  });
});

Alec · Accepted Answer · 2024-07-05 06:17:14Z

<form id="transport-form">
  <div class="form-group">
    <label>Room1</label>
    <input type="text" name="child[0]" value="2">
    <input type="text" name="age[0][]" class="age-input">
    <input type="text" name="age[0][]" class="age-input">
  </div>
  <div class="form-group">
    <label>Room2</label>
    <input type="text" name="child[1]" value="2">
    <input type="text" name="age[1][]" class="age-input">
    <input type="text" name="age[1][]" class="age-input">
  </div>
  <input type="submit" value="submit">
</form>

jQuery

$(document).ready(function() {
    $.validator.addMethod("ageRange", function(value, element) {
        var age = parseInt(value, 10);
        return age >= 1 && age <= 12;
    }, "Age must be between 1 and 12.");

    var rules = {};
    $(".age-input").each(function() {
        var name = $(this).attr("name");
        rules[name] = {
            required: true,
            ageRange: true
        };
    });

    $("#transport-form").validate({
        rules: rules,
        messages: {
            'age[0][]': {
                required: "Please enter an age for Room 1.",
                ageRange: "Age must be between 1 and 12 for Room 1."
            },
            'age[1][]': {
                required: "Please enter an age for Room 2.",
                ageRange: "Age must be between 1 and 12 for Room 2."
            }
        }
    });
});

Collectives™ on Stack Overflow

How to validate array of array inputs Jquery? [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related