CODEWITHSUNDEEP
javascriptjqueryvalidationcheckbox
Zeeshan
Zeeshan

Reputation: 12421

How to validate table value based on checkbox selected

Following is my table structure:

<tr class="odd">
<td class=" sorting_1">
<input id="clone1042154701" class="fileCheckAll" type="checkbox" name="clone1042154701"  checked="">
</td>
<td class="">
<input id="appName1042154701" class="fileAppName invalid" type="text" onblur="validate(this.value,1042154701)" name="appName1042154701">
<div id="error1042154701">
</td>
<tr>
<tr>

<tr class="even">
<td class=" sorting_1">
<input id="clone1042154702" class="fileCheckAll" type="checkbox" name="clone1042154702"  checked="">
</td>
<td class="">
<input id="appName1042154702" class="fileAppName invalid" type="text" onblur="validate(this.value,1042154701)" name="appName1042154701">
<div id="error1042154702">
</td>
<tr>
<tr>
.
.
.
and many more rows

On onblur event I am calling a javascript validate function which sets class as "invalid" on error.

Now before form submission I am call a javascript method inside which checks class for error and returns false id error.

if ($("[id^=appName]").hasClass("invalid")) { 
            alert("Invalid Application name");
             return false;
        }

The problem that I am facing is that it is validation all the table rows irrespective of whether it is checked via checkbox or not. I need to validate only those row which are checked via checkbox.

Can some please suggest me how to proceed.

Upvotes: 0

Views: 940

Answers (2)

jyrkim
jyrkim

Reputation: 2869

Updated answer: it took me while, but I might have got the desired result. So if you use the following:

if ($(".invalid[id^=appName]").closest("tr").find("input:checked").length > 0 ) {
        alert("Invalid Application name");
        return false;
}

it alerts only if there are at least one element with class invalid and the checkbox is selected on the same row.

Also, I'd have a look at the table as well, I noticed some missing ending tags for tr (</tr>) and for divs that were inside td. Sorry for pointing this out, but it might have some effect on HTML validation.

function validate() {

  var invalidRowCount = $(".invalid[id^=appName]").closest("tr").find("input:checked").length;


  console.log(invalidRowCount); //prints 2

  if ($(".invalid[id^=appName]").closest("tr").find("input:checked").length > 0 ) {
    alert("Invalid Application name");
    return false;
  }
}
td div { display: inline }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
  <tr class="odd">
    <td class=" sorting_1">
      <input id="clone1042154701" class="fileCheckAll" type="checkbox" name="clone1042154701" checked="">
    </td>
    <td class="">
      <input id="appName1042154701" class="fileAppName invalid" type="text" onblur="validate(this.value,1042154701)" name="appName1042154701">
      <div id="error1042154701">invalid</div>
    </td>
  </tr>
  <tr class="even">
    <td class=" sorting_1">
      <input id="clone1042154702" class="fileCheckAll" type="checkbox" name="clone1042154702" checked="">
    </td>
    <td class="">
      <input id="appName1042154702" class="fileAppName invalid" type="text" onblur="validate(this.value,1042154701)" name="appName1042154701">
      <div id="error1042154702">invalid</div>
    </td>
  </tr>

  <tr class="odd">
    <td class=" sorting_1">
      <input id="clone1042154701new" class="fileCheckAll" type="checkbox" name="clone1042154701new" checked="">
    </td>
    <td class="">
      <input id="appName1042154701new" class="fileAppName" type="text" onblur="validate(this.value,1042154701)" name="appName1042154701">
      <div id="error1042154701new">valid</div>
    </td>
  </tr>

</table>

<br>
<button onclick="validate()">Click me</button>

Upvotes: 1

Dharmendra Jadon
Dharmendra Jadon

Reputation: 141

You can use:

$('#someId').filter(':checked');

i.e. use the filter method for it.

Upvotes: 0

Related Questions