Make text boxes in a row required if any other text box of a row is filled?

Question

I am posting my FormCollection to my HttpPost Action in Asp.Net MVC . Everything is working fine but the problem is validation. I have 3 Rows each with 3 textboxes. I want to make sure through JavaScript or C# that if any textbox of a row is filled then others are required. I cannot make it static since rows and textboxes are very dynamic. We could have five rows, six or many. Following is my code:

@{
     int count = 0;
     foreach (var record in Model)
     {
       <tr>
         <td> 
            @Html.Hidden(count.ToString() + "Record", record.Id.ToString())
         </td>
         <td>
                <input type="text" name="@count.ToString()Code" />         
         </td>
         <td>
                <input type="text" name="@count.ToString()Name" />     
         </td>           
       </tr>
       count = count + 1;
     }
     @Html.Hidden("TotalRecords", count)
}

Suppose, I have three rows each with code and name. If the code of row1 is filled, I need to make sure the name of 'row1' should be filled to. How can I do this?

Answer 1

You can handle it by adding class to all your textboxes. Verify that if textbox with that class has no value then display message as shown in below code

 $("#submit").click(function(){ var Flag=0; debugger $('.textBox').each(function(i) { if($(this).val()=="") { if(Flag==0) { Flag=1+i; } } }); if(Flag!=0) { alert("Please fill textbox : "+Flag) } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" class="textBox" > <br /> <input type="text" class="textBox" > <br /> <input type="text" class="textBox" > <br /> <input type="button" id="submit" value="submit" >