CODEWITHSUNDEEP
javascriptphpjqueryvalidationcheckbox
Mr world wide
Mr world wide

Reputation: 4814

Jquery validation code for check box in table

Image of skills required From the above image i have added more functionality, So my question is for every skill GD (or) PI (or) both checkboxes has to be mandatory.(Atleast one checkbox has to be selected) how can i achieve that.? this is my html:

<a class="text-center btn btn-danger addSkills">+ Add Skills</a>
<input class="selectGdSkill" type="checkbox" count="0" id="skill[0][gdskill]" name="skill[0][gdskill]">
<input class="selectPiSkill" type="checkbox" count="0" id="skill[0][piskill]" name="skill[0][piskill]">

this is add more functionality code:

var skillcount = 1;
$(".addSkills").click(function () {
    $('#jobSkills tr:last').after('<tr>
    <td><input class="searchskill" count="' + skillcount + '" id="skill_' + skillcount + '_title" name="skill[' + skillcount + '][title]" type="text" autocomplete="off"></td><td><input count="' + skillcount + '" id="skill_' + skillcount + '_weightage" name="skill[' + skillcount + '][weightage]" type="text" autocomplete="off"></td>
    <td><select class="wp-form-control" name="skill[' + skillcount + '][type]"><option value="0">Select Test Type</option><option value="1">Practice Test</option><option value="2">Qualifying</option></select></td>
    <td><input  class="selectGdSkill" type="checkbox" count="' + skillcount + '" id="skill[' + skillcount + '][gdskill]" name="skill[' + skillcount + '][gdskill]"></td>
    <td> <input class="selectPiSkill" type="checkbox" count="' + skillcount + '" id="skill[' + skillcount + '][piskill]" name="skill[' + skillcount + '][piskill]"></td>
    <td><span class="removeSkill" id="' + skillcount + '" ><a style="color:red">Remove</a></span></td>
    </tr>');
    skillcount++;
});

help me in fiddle: https://jsfiddle.net/r359b453/6/

Upvotes: 1

Views: 1233

Answers (3)

srinivas gowda
srinivas gowda

Reputation: 496

Give same class name to all checkbox and try this one

$(document).ready(function() {
    $("#submitBTN").click(function(e) {                 
        if($('.case:checkbox:checked').length==0){
            alert("Please select");                 
        }         
    });
});

Upvotes: 2

Niklesh_Chauhan
Niklesh_Chauhan

Reputation: 657

Here Your HTML I have changed input box IDs and put your table <div id="myDiv"> <table id="tableID"> <tr> GD<input class="selectGdSkill" type="checkbox" id="selectGdSkill_0"> PI<input class="selectPiSkill" type="checkbox" id="selectPiSkill_1"> </tr> <br> <tr> GD<input class="selectGdSkill" type="checkbox" id="selectGdSkill_1"> PI<input class="selectPiSkill" type="checkbox" id="selectPiSkill_1"> </tr> </table> <button id="JobSubmit" class="btn btn-success text-center">SUBMIT JOB</button> </div>

Here is javascript code for check.

    $(document).ready(function(){
    $("#JobSubmit").on("click",function(){          
        var IDs = [];
        $("#myDiv").find("input").each(function(){ IDs.push(this.id); });
         console.log(IDs);

         $.each(IDs, function(i, value) {
            if(!($("#"+value ).is(":checked"))){
                alert("Atleast one checkbox has to select from every tr");
                return false;
            }

         });

    })
})

Upvotes: 3

Mr world wide
Mr world wide

Reputation: 4814

If Both checkboxes are empty for every skill say select atleast on checkbox

  var rows = document.getElementsByTagName('tr');
    var isTableValid = true;
    for(var i=0;i<rows.length;i++) {
        var checkboxs=rows[i].getElementsByClassName("selectGdSkill");//add "selectPiSkill" class in this
        var okay=false;
        for(var j=0;j<checkboxs.length;j++){
            console.log('here' + checkboxs[j].checked);
            if(checkboxs[j].checked){
                okay=true;
                break;
            }
        }
        if(!okay && checkboxs.length > 0) {
            isTableValid = false;
            break;
        }
    }
    if(isTableValid)
    return true;
    else
    {
        alert("Please select atleast one checkbox every skill either GD or PI");
        return false;
    }

it is workking for every <tr> but only for selectGdSkill And

i am looking for Anyone from the two checkboxes GD (or) PI

Upvotes: 1

Related Questions