如何验证带有输入字段的单选按钮？

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处理函数，这些处理函数将检查按钮是否被选中并相应地设置文本框的所需状态。