skip to Main Content

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 
                        }
            }
        },
    });

2

Answers


  1. <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."
                }
            }
        });
    });
    
    Login or Signup to reply.
  2. 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."
        }
      });
    });
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search