Use jquery validation plugin to validate complex array of input

Question

I'm using jquery validation plugin to validate complex array of inputs.

HTML form

<form class="test_frm" action="" method="post" >
    <input class="form-control" type="text" name="rateType[0][type]" />
    <input class="form-control" type="text" name="rateType[0][rate]" />
    <input class="form-control" type="text" name="rateType[0][percent]" />

    <input class="form-control" type="text" name="rateType[1][type]" />
    <input class="form-control" type="text" name="rateType[1][rate]" />
    <input class="form-control" type="text" name="rateType[1][percent]" />

    <input class="form-control" type="text" name="rateType[2][type]" />
    <input class="form-control" type="text" name="rateType[2][rate]" />
    <input class="form-control" type="text" name="rateType[2][percent]" />
</form>

JS code

$(function () {
    $(".test_frm").validate({
        submitHandler: function (form) {
            form.submit();
        },
        ignore: [],
        rules: {
            'rateType[]': {
                required: true
            }
        }
    });
});

What I need with validation is it should be true if at least one text input is filled. But this code not working even though it worked for simple array inputs. Would be a great help if someone know how to do this. And great if it's not depend on array value like [0] or [type].

Sparky · Accepted Answer · 2020-04-21 14:38:04Z

rules: {
    'rateType[]': {  // <- does not match any NAME on the form!
        required: true
    }
}

The identifier used within your options must match the name of a field.

rules: {
    'rateType[0][type]': {
        required: true
    },
    'rateType[0][rate]': {
        required: true
    },
    'rateType[0][percent]': {
        required: true
    },
    // etc. etc. for every field on the form.
}

Since this is quite cumbersome, you can use the .rules() method along with a more generic selector like a "starts with". You'll need an .each() since this validation plugin does not accept a selection with more than one element.

$("[name^='rateType']").each(function() {
    $(this).rules('add', {
        required: true
    });
});

NOTE: The .rules() method can only be called after you've called your .validate() method.

$(function () {

    $(".test_frm").validate({
        submitHandler: function (form) {
            form.submit();
        },
        ignore: [],
    });

    $("[name^='rateType']").each(function() {
        $(this).rules('add', {
            required: true
        });
    });

});

Alternatively, if you want a HTML solution, you can just add an inline class or an HTML5 attribute and the jQuery Validate plugin will pick up either one automatically.

<input class="form-control" type="text" name="rateType[0][type]" class="required" />

OR

<input class="form-control" type="text" name="rateType[0][type]" required="required" />

Collectives™ on Stack Overflow

Use jquery validation plugin to validate complex array of input

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