Loop through visible textboxes on the page jquery

Question

I am trying to check textboxes on the page in a form that are visible, and validate that they are not empty, I have a couple of hidden textboxes that unhide themselves when the users select certain items. I am trying to skip over these hidden textboxes unless they are visible..I attempted this code, but it's still alerting that the invisible textbox has no value.

jQuery:

<script type="text/javascript">
$(function () {
    $('#selected1').val("");
    $('#selected2').val("");

    $('select').change(function () {
        if ($('#DDLHearAboutUs').val() === "Optional1") {
            $('#OptionalTxt1').show();
        } else {
            $('#OptionalTxt1').hide();
        }
        if ($('#DDLProfession').val() === "Optional2") {
            $('#OptionalTxt2').show();
        } else {
            $('#OptionalTxt2').hide();
        }
    });

});


function checkEmpty() {
    var empty = false;
    $('select').each(function () {
        if ($(this)[0].selectedIndex === 0) {
            empty = true;
        }

    });
    $('form input:text:visible').each(function () {
        if ($(this).val().length === 0) {
            empty = true; 
        }
    });


    if (empty) {
        alert('Please fill out all of the fields');
        return false;
    }
}
</script>

HTML:

<label><strong>How did you hear about us? &nbsp;</strong>
</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<select name="DDLHowDidYouHearAboutUs" id="DDLHearAboutUs" required="required" style="height: 20px;">
    <option style="display: none;" id="selected1" disabled="true" selected="selected">--Select--</option>
    <option value="Website">Website</option>
    <option value="Mailing">Mailing</option>
    <option value="Email">Email</option>
    <option value="Referral">Referral</option>
    <option value="Optional1">Optional:</option>
</select>
<input type="text" style="width: 160px; height: 20px; display: none;" id="OptionalTxt1" />
<br />
<br />
<label><strong>Please indicate your profession: &nbsp;</strong>
</label>
<select style="height: 20px;" name="DDLProfession" id="DDLProfession" required="required">
    <option selected="selected" disabled="disabled" style="display: none;" id="selected2">--Select--</option>
    <option value="OccupationalTherapist">Occupational Therapist</option>
    <option value="OccupationalTherapyAssistant">Occupational Therapy Assistant</option>
    <option value="PhyiscalTherapist">Phyiscal Therapist</option>
    <option value="PhyiscalTherapyAssistant">Phyiscal Therapy Assistant</option>
    <option value="AthleticTrainer">Athletic Trainer</option>
    <option value="Optional2">Other:</option>
</select>
<input type="text" style="width: 160px; height: 20px; resize: none; display: none;" id="OptionalTxt2" />
</td>
</tr>
<tr>
    <td align="left" valign="top">
        <br />
        <br />
        <label><strong>Full Name: &nbsp; &nbsp; &nbsp; &nbsp; </strong></label>&nbsp;&nbsp;
        <input type="text" style="width: 235px;" name="FullName" required="required" /><br />
        <br />
        <label><strong>Mailing Address: &nbsp;</strong></label>
        <input type="text" style="width: 235px;" name="Address" required="required" /><br />
        <br />
        <label><strong>Email: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</strong></label>&nbsp;
        <input type="textl" name="Email" style="width: 235px;" required="required" /><br />
        <br />
        <label><strong>Phone Number: </strong></label>&nbsp;&nbsp;&nbsp;
        <input type="text" name="Phone" required="required" />
        <br />

Answer 1

Figured it out.. I used this: $('input[type="text"]:visible') as the selector instead of $('form input:text:visible') maybe the multiple colons wasn't correct syntax...works like a charm though.