ラジオボタンの内部の入力フィールドを確認するにはどうすればよいですか？

Question

私はこれらのラジオボタンをユーザが選択でき、その中にテキスト入力が必要です。これらの入力を検証してラジオ・オプションを選択する必要がある場合、最初の2つの入力のいずれかである場合は、テキスト入力に記入するようにしてください。私は何とか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ハンドラを持つことができます。