Add validation to dynamically created checkboxes jQuery

Question

I am working on dynamic form which is radio, checkbox are added dynamically. Unfortunately, I stuck in adding validation.

How to add require attribute to checkboxes ?

Following code

<ol type="a">
  <li><input type="radio" name="answer0[]">A</li>
  <li><input type="radio" name="answer0[]">A</li>
  <li><input type="radio" name="answer0[]">A</li>
</ol>
<ol type="a">
  <li><input type="checkbox" name="answer1[]">A</li>
  <li><input type="checkbox" name="answer1[]">A</li>
  <li><input type="checkbox" name="answer1[]">A</li>
</ol>

Input type depends on question which is radio or checkbox
There could be any number of questions answer1[], answer2[], answer3[]

First approach as follows

$('ol').each(function (i) {
    $(this).find("input:first").prop("required", true);
});

Since input elements have same name radio type works fine. But checkbox required to be checked only first input.

Second

$('ol').each(function (i) {
    $("[name='answer"+i+"[]']").rules("add", {required:true});
});

But it gives following error

Cannot read property 'settings' of undefined

How to add validation to checkbox at least one must be checked...

What plugin you are using for validation ?

talkhabi
– talkhabi

2017-01-25 18:15:32 +00:00
Commented Jan 25, 2017 at 18:15 — talkhabi
– talkhabi, Commented Jan 25, 2017 at 18:15
jQuery validation

Orgil
– Orgil

2017-01-25 18:16:54 +00:00
Commented Jan 25, 2017 at 18:16 — Orgil
– Orgil, Commented Jan 25, 2017 at 18:16

talkhabi · Accepted Answer · 2019-08-20 15:14:36Z

2

Okay try this solution:

var rules = {};

$('ol [type="checkbox"], ol [type="radio"]').each(function(i,el){
    var name = $(el).attr('name');
    if(rules[name] === undefined){
        rules[name] = {
            required: true
        };
    }
});

$("#myform").validate({
    rules: rules
});

edited Aug 20, 2019 at 15:14

answered Jan 25, 2017 at 18:59

talkhabi

2,7693 gold badges22 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Orgil Over a year ago

Thanks it works, nice approach getting element name.

Jeb50 · Accepted Answer · 2017-01-25 18:20:47Z

0

I'd add the dynamic logic into "rules" directly. I recently solved my own problem where one form has two default submit buttons. Added rules as functions took care of it.

answered Jan 25, 2017 at 18:20

Jeb50

7,14711 gold badges70 silver badges118 bronze badges

Comments

DHRUV GUPTA · Accepted Answer · 2017-01-25 18:31:51Z

0

you can try

$('ol').each(function (i) {
    $(this).find("input[type='checkbox']").prop("required", true);
});

try checking length of checked checkboxes

$('ol').find('input[type="checkbox"]:checked').length

edited Jan 25, 2017 at 18:31

answered Jan 25, 2017 at 18:17

DHRUV GUPTA

2,1111 gold badge17 silver badges25 bronze badges

4 Comments

Orgil Over a year ago

Your approach make all checkboxes require to be checked.

DHRUV GUPTA Over a year ago

ok then you can check length of checked checkboxes in each ol. check edited answer

Orgil Over a year ago

Suppose there are 50 questions, I don't think it is good idea to check each questions checkboxes length.

DHRUV GUPTA Over a year ago

you can loop through all ol wrap it under div, and inside ol loop through input

Collectives™ on Stack Overflow

Add validation to dynamically created checkboxes jQuery

3 Answers 3

1 Comment

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related