使用 show hide jQuery 時的驗證輸入

Question

我如何驗證是否有使用display:none的 div

 $("input[name$='test']").click(function() { var test = $(this).val(); $("div.desc").hide(); $("#test" + test).show(); }); $(".check").click(function(){ var name = $("#name").val(); var add = $("#add").val(); var hobby = $("#hobby").val(); if( name == "" ){ $("#name").css('border', '1px solid red'); return false } else if ( add == "" ){ $("#add").css('border', '1px solid red') } else if ( hobby == "" ){ $("#hobby").css('border', '1px solid red') } else { alert('success'); return true } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="myRadio"> <div class="condition"> <input type="radio" name="test" checked="checked" value="Y" id="first" /> <label for="first">First</label> </div> <div class="condition"> <input type="radio" name="test" value="N" id="second" /> <label for="second">Second</label> </div> <div class="condition"> <input type="radio" name="test" value="YN" id="third" /> <label for="third">Third</label> </div> </div> <div id="testY" class="desc"> <label for="name">Name</label> <input type="text" id="name" /> </div> <div id="testN" class="desc" style="display:none"> <label for="add">Add</label> <input type="text" id="add" /> </div> <div id="testYN" class="desc" style="display:none"> <label for="hobby">Hobby</label> <input type="text" id="hobby" /> </div> <br> <button class="check">Check</button>

當我填寫第一個內容並單擊驗證時，它應該發出成功警報，因為我的目標是驗證正在顯示的 div。

任何的想法？

謝謝

Answer 1

您可以先通過選中的單選值找到需要檢查的輸入，然后驗證此輸入：

 $("input[name$='test']").click(function() { var test = $(this).val(); $("div.desc").hide(); $("#test" + test).show(); }); $(".check").click(function(){ let checked = $("input[name$='test']:checked").val(); let input = $("#test" + checked).find('input'); let val = input.val(); if(!val){ $(input).css('border', '1px solid red'); return false } alert('success'); return true })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="myRadio"> <div class="condition"> <input type="radio" name="test" checked="checked" value="Y" id="first" /> <label for="first">First</label> </div> <div class="condition"> <input type="radio" name="test" value="N" id="second" /> <label for="second">Second</label> </div> <div class="condition"> <input type="radio" name="test" value="YN" id="third" /> <label for="third">Third</label> </div> </div> <div id="testY" class="desc"> <label for="name">Name</label> <input type="text" id="name" /> </div> <div id="testN" class="desc" style="display:none"> <label for="add">Add</label> <input type="text" id="add" /> </div> <div id="testYN" class="desc" style="display:none"> <label for="hobby">Hobby</label> <input type="text" id="hobby" /> </div> <br> <button class="check">Check</button>