Question

所以我有这些单选按钮，用户可以选择，然后我需要在其中输入文本。如何验证这些输入，以便他们需要选择一个无线电选项，如果它是前两个选项之一，请确保他们填写文本输入？我假设我需要以某种方式使用jquery.validator.addMethod，但我真的迷失了我需要做的事情。我真的很感激一些帮助。非常感谢！

＆＃13;

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

＆＃13;

Answer 1

是的，跳过服务器端验证不是一种选择，但如果您也在客户端进行验证，则可以获得更好的用户体验。在用户意识到问题之前等待往返服务器是一种让用户失望的可靠方法。单选按钮可以有onChange个处理程序，用于检查按钮是否被选中并相应地设置文本框的所需状态。

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

1 个答案: