Question

我正在尝试以可见的形式检查页面上的文本框，并验证它们不是空的，我有几个隐藏的文本框，当用户选择某些项目时，它们会自行取消隐藏。我试图跳过这些隐藏的文本框，除非它们是可见的..我尝试了这个代码，但它仍然警告隐形文本框没有值。

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

想出来..我使用了这个：$('input[type="text"]:visible')作为选择器而不是$('form input:text:visible')也许多个冒号的语法不正确......虽然像魅力一样。

循环遍历页面jquery上的可见文本框

1 个答案: