2016-11-23 42 views
0

所以我有这些单选按钮,用户可以选择,然后我需要在它的文本输入。我如何验证这些输入以便他们需要选择一个无线电选项,如果它是前两个之一,确保他们填写文本输入?我假设我需要使用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>

+0

**客户端**验证(js/html ...)将永远不够好,它很容易绕过简单的检查元素摆弄。如果你真的想验证你的客户端的输入,你需要在**服务器端**(php/node/ruby​​ ...) – Mihailo

+0

@Mihailo我将这个交给了一个开发人员,他将在asp.net,所以我会提出这个问题。谢谢。 –

回答

1

是,跳过服务器端验证是不是一种选择,但你得到一个更好的用户体验,如果你也对客户端进行验证了。在用户意识到问题之前等待往服务器的往返是确保用户关闭的一种方法。单选按钮可以有onChange处理程序,用于检查是否选择该按钮并相应地设置文本框的所需状态。

相关问题