如何驗證帶有輸入字段的單選按鈕？

Question

因此，我具有用戶可以選擇的這些單選按鈕，然后需要在其中輸入文本。 如何驗證這些輸入，以便要求他們選擇單選選項；如果它是前兩個選項之一，請確保它們填寫了文本輸入？ 我認為我需要以某種方式使用jquery.validator.addMethod，但是我真的迷失了我需要做的事情。 我真的很感謝您的幫助。 非常感謝！

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/additional-methods.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div id="itemPricing" class="clearfix"> <div class="row"> <div class="col-sm-12" form-group> <label for="itemPricing" class="required">Pricing</label> <span id="helpBlock" class="help-block">Select how you want pricing to display on your website.</span> </div> <!-- Regular Price --> <div class="col-sm-12 form-group"> <div class="form-inline radio-input-group"> <div class="radio"> <input type="radio" class="height-initial" name="pricingOptions" id="regularPrice" value=""> <label for="regularPrice" class="required">Regular Price</label> </div> <div class="input-group"> <span class="input-group-addon">$</span> <input type="text" class="form-control money" id="productPrice" name="productPrice"> </div> </div> <div class="form-inline radio-input-group"> <div class="radio"> <input type="radio" class="height-initial" name="pricingOptions" id="salePrice" value=""> <label for="salePrice" class="required">Sale Price</label> </div> <div class="input-group"> <span class="input-group-addon">$</span> <input type="text" class="form-control money" id="productPrice" name="productPrice"> </div> </div> <div class="form-inline radio-input-group"> <div class="radio"> <input type="radio" class="height-initial" name="pricingOptions" id="emailPrice" value=""> <label for="emailPrice" class="required">Email for Price</label> </div> </div> </div> </div> </div> <!-- end itemPricing --> <button type="submit" class="btn btn-success save ladda-button" data-style="zoom-in">Save</button> 

Answer 1

是的，跳過服務器端驗證不是一種選擇，但是如果您也在客戶端進行驗證，則可以獲得更好的用戶體驗。 在用戶意識到問題之前等待服務器往返是確保用戶生氣的一種肯定方法。 單選按鈕可以具有onChange處理函數，這些處理函數將檢查按鈕是否被選中並相應地設置文本框的所需狀態。