I have a form with jquery-validate and jquery-steps. I need to check, if one of fields is not empty, the other in a same row must be filled. As you know elements with class "required" must be filled. I leave every element without class required. Before going next step, it must check if there any not empty element. If there is at least one, it must add class "required" to all inputs in same row. For example if input "name" is filled, input "surname" and input "email" must be filled too.

<table bolder=1">
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Email</th>
</tr>
</thead>
</table>
<tbody>
<tr>
<td>
<input class="documentCheck" type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<input class="documentCheck" type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<input class="documentCheck" type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
</tbody></table>

Here what i have done before i understand that im dummy: Fiddle

 $(function () {
     $(".documentCheck").change(function () {
         name = $(".documentCheck").val();
         if (name.length > 0) {
             $("td").find('.req').first().addClass("required");
         }
     });
 });

thanks in advance

有帮助吗?

解决方案

do this:

     $(document).ready(function(){
        $(".documentCheck").on('change',"td > input",function() {
             $(this).parent().siblings().children('input').addClass('required');
         });
     });

FIDDLE

UPDATED FIDDLE

其他提示

Try

$(function () {
 $(".documentCheck").blur(function () {
     name = $(".documentCheck").val();
     if (name.length > 0) {
         $(this).parents("tr").find("input").addClass("required");
     }
     else
    {
     $(this).parents("tr").find("input").removeClass("required");
     }
 });
 });

Change will fire only if the previous value of the input changed. If you put the input as blank, it wont fire.

Demo

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top