Validate a text field only if display:block

Question

I have 2 text fields that need to be validated.

1. Merge/Reason field needs to be validated
2. Barcode needs to be validated only if it is displayed, i.e. if checkbox is checked.

What I am trying to do is pop-up an alert box for merge-reason (regardless) and add a validation message for barcode in alert if not hidden

Here is the code:

    <tr><td>
       <input type="checkbox" name="createCharge" id="createCharge" onClick="checkBox('Barcode', 'CreateCharge');" value="1"/> 
       <lable>Charge</label>
     </td></tr>


    <tr id="Barcode" style="display:none;">
    <td>
        <label>Barcode</label>
        <input type="text" name="Barcode" id="Barcode"/>
    </td>
    </tr>

    <tr>
    <td>
        <label>Merge:</label>
        <input type="text" name="Reason" id="Reason"/>
    </td>
    </tr>

Answer 1

You can simply check like this:-

if($(x).is(":visible"))
{
  //your element is visible
}

JAVASCRIPT

var display= document.getElementById('x').style.display;

if(display=='block')
 {
   //do validation here.
 }

Answer 2

if( $('#Barcode').is(':visible') ){
    // Perform code here
}

How do I check if an element is hidden in jQuery?

if( $('#Barcode').is(':visible') && $('#Reason').val().length!==0 ){
    // Barcode is visible and reason has a value more then 0 chars long
}