CODEWITHSUNDEEP
c#javascriptjqueryasp.netvalidation
Sandy
Sandy

Reputation: 2449

Javascript validation for checkboxes in JQuery DataTable

I have a table which is binding with JQuery datatable.

<table id="grid1">
 <thead>
   <tr>
     <th>Name</th>
     <th>View</th>
     <th>Modify</th>
   </tr>
  </thead>
</table>

Below is the javascript code for binding the table/grid-

function grid1_LoadData() {        
    grid1.fnDestroy();
    grid1.dataTable({
        "sScrollY": "200px",
        "bStateSave": true,
        'bDeferRender': true,
        'sAjaxSource': '/controller/GetData,
        'aoColumns': [
                     { 'mDataProp': 'Name' },
                     { 'mDataProp': 'View', "sWidth": "55%", sType: 'bool', bSearchable: false, bSortable: false, mData: 'View',
                         "mRender": function (data, type, full) {
                             return "<input class=\"enabledbool\" name=\"CanView" + full.ID + "\"  type=\"checkbox\" " + (data ? " checked=\"true\"" : "") + "/>";
                         }
                     },
                     { 'mDataProp': 'Modify', "sWidth": "65%", sType: 'bool', bSearchable: false, bSortable: false, mData: 'Modify', "mRender": function (data, type, full) {
                         //  console.log(data);
                         return "<input class=\"enabledbool\" name=\"CanModify" + full.ID + "\"  type=\"checkbox\" " + (data ? " checked=\"true\"" : "") + "/>";
                     }
                     },
                     ]
    });        
}

Before saving the grid/table data, I want to check at least View or Modify check box is checked. I need to write a javascript validation function.

This is what I have tried- 

function Validate() {
    $(grid1.fnGetData()).each(function () {
        if ($(.checkbox).is(':checked')) {
            return true;
        }
        else {
            return false;
        }
    });
}

Waiting for the valuable suggestions.

UPDATES I ended up using the below javascript function for checking validation -

function Validate() {
    var allOk = true;
    $(grid1).find("tbody tr").each(function (){
        var row = $(this);
        if (!row.Modify && !row.View) {
            allOk = false;
        }
    });
    return allOk; // Make `Validate` return true only if all rows validate.
}

What I was trying to do was if Modify and View are not checked then return false. When I checked with $(gridProfiles.fnGetData()).each(function () instead of $(grid1).find("tbody tr").each(function (), it was fine. But grid rows are added dynamically, last added rows won't listed when using $(gridProfiles.fnGetData()).each(function (). Any solution?

Upvotes: 0

Views: 1987

Answers (4)

Sandy
Sandy

Reputation: 2449

This is worked fine for me -

function Validate() {
    var allOk = true;
    $(grid1).find("tbody tr").each(function () {
        var row = $(this);
        if (row.find($(':checkbox:not(:checked)')).length == 2) {
            allOk = false;
            return allOk;
        }
    });
    return allOk; 
}

Upvotes: 0

Edorka
Edorka

Reputation: 1811

you should add a temporary var like oneIsSet = false and change the value if any one is checked.

function Validate() {
    var allValid = true;
    $(grid1).find("tbody tr").each(function () {
        var row = $(this);
        var thisOneValid = false;
        if (row.find('input[type="checkbox"]:checked').size() > 0)
            thisOneValid = true;
        if (! thisOneValid)
            allValid = false;
    });
    return allValid;
}

Upvotes: 1

Rohan Kumar
Rohan Kumar

Reputation: 40639

Change your class name to enabledbool from checkbox

function Validate() {
    var flag=0;
    $(grid1.fnGetData()).each(function () {
        if ($(this).find('.enabledbool').is(':checked')) {
            flag++;
        }
    });
    return flag ? true : false;// return here
}

Upvotes: 0

Piotr Czarnecki
Piotr Czarnecki

Reputation: 1688

Your function in my opinion is almost good. You made one bug in each function I would correct this function to:

function Validate() {
    $(grid1.fnGetData()).each(function () {
        if (this.is(':checkbox :checked')) {
            return true;
        }
    });
    return false;
}

Main change is to move return false statement from each loop. In your version this loop would have always only one iteration. In my version it will iterate till find checked checkbox. If there is no checked checkbox return false. I have no compiler in my head so sorry for mistakes.

Upvotes: 1

Related Questions