通過頁面上的可見文本框循環jquery

我想檢查頁面上的文本框是可見的，並驗證它們不是空的，我有一些隱藏的文本框，當用戶選擇某些項目。我試圖跳過這些隱藏的文本框，除非它們是可見的。我試圖這個代碼，但它仍然警告不可見的文本框沒有價值。通過頁面上的可見文本框循環jquery

的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 />

來源

2014-10-03 user3267755

你在隱形文本框上放置一個類來隱藏它們嗎？嘗試搜索所有文本框幷包含一個if語句，該語句表示'沒有makeMeInvisible類'。 – Mark 2014-10-03 14:17:18

不，要隱藏它們我有另一個函數爲dropdownlist激發onchange，如果value = im查找的值，那麼它只是在文本框上執行.show（）或.hide（）。 – user3267755 2014-10-03 14:18:31

什麼叫' checkEmpty'？ – j08691 2014-10-03 14:25:25

想通了。我用這個：$('input[type="text"]:visible')作爲選擇的，而不是$('form input:text:visible')也許多個冒號是不正確的語法...像魅力一樣工作。

來源

2014-10-03 14:36:10 user3267755

+1使用你的灰質。 – 2014-10-03 14:59:20

通過頁面上的可見文本框循環jquery

回答

相關問題