CODEWITHSUNDEEP
javascriptjqueryvalidationdynamic
PeteSE4
PeteSE4

Reputation: 327

validating at least one checkbox selected on dynamically added fields

If you're dynamically adding form fields to an existing form, what's the best way of adding validation?

Consider this fiddle: http://jsfiddle.net/yWGK4/

<form action="#" method="post">
<div id="parent">
    <div class="child">
        <input type="checkbox" name="box1[]" value="1" /> 1
        <input type="checkbox" name="box1[]" value="2" /> 2
        <input type="checkbox" name="box1[]" value="3" /> 3
    </div>
</div>
</form> 
<button id="addBoxes">Add Boxes</button>

<script>
$(function() {
    var parentdiv = $('#parent');
    var m = $('#parent div.child').size() + 1;
    $('#addBoxes').on('click', function() {
        $('<div class="child"><input type="checkbox" name="box'+m+'[]" value="1" /> 1 <input type="checkbox" name="box'+m+'[]" value="2" /> 2 <input type="checkbox" name="box'+m+'[]" value="3" /> 3 </div>').appendTo(parentdiv);
        m++;
        return false;
    });
});
</script>

On that form I'm adding new checkbox groups, and want to make sure at least one box from each group is checked (not one box across all groups). Anyone got any clever methods? Everything I've looked at would get very complicated due to the dynamically added fields.

Upvotes: 0

Views: 2164

Answers (3)

Ruben Verschueren
Ruben Verschueren

Reputation: 842

here's what I came up with. Basically you loop over the .child groups and test if they have a checkbox in the checked state..

 $('#checkBoxes').on('click', function(){
    var uncheckedgroups = new Array();
    $('.child').each(function(childindex, childelement){
        var checkFound = 0;
        $('.child').each(function(index, element){
            if($(element).is(':checked')){
                checkFound = 1;
            }
        });
        if(checkFound == 0){
            uncheckedgroups.push(childindex);                
        }
    });
    if(uncheckedgroups.length > 0){
    alert("the following groups have no checked checkbox: " +
         uncheckedgroups.join(','));
    }
});

Upvotes: 0

Gil Sousa
Gil Sousa

Reputation: 844

If you want to check it using jQuery you can use `.each()

$(".child").each(function(){
   var $this = $(this);
   var checked = $this.find("input:checked");
   if( checked.lenght == 0 ) {
      alert("This group is not valid");
   }
});

You can find more about this jQuery functions in this links: each()

find()

Upvotes: 0

adeneo
adeneo

Reputation: 318342

It doesn't matter if the checkboxes are dynamic when validating on submit etc. so something like this would check if at least one checkbox per .child is checked : 

$('form').on('submit', function(e) {
    e.preventDefault();
    var valid = true;

    $('.child').each(function() {
        if ( ! $('[type="checkbox"]:checked', this).length ) // no box checked
            valid = false;
    });

    if (valid) {
        this.submit();
    }else{
        alert('error');
    }
});

FIDDLE

Upvotes: 2

Related Questions