如何驗證單選按鈕內的輸入？

Question

我使用jquery驗證了這一點，並有3個單選按鈕，其中兩個有一個輸入，他們可以把價格。我需要它，所以必須選擇3個單選按鈕中的一個，並且如果它是前2箇中的一個，我需要它們在那裏也有價格。我需要創建一個額外的方法嗎？我已經在頁面中包含了其他一些驗證，但是html只顯示了我正在使用的一部分。

// Validation 
$(document).ready(function() { 

     jQuery.validator.addMethod("noSpace", function(value, element) { 
      return this.optional(element) || /^http:\/\/mycorporatedomain.com/.test(value); 
     }, "Please specify the correct domain for your documents"); 


     jQuery.validator.addMethod("checkmeout", function(value, element) { 
      return this.optional(element) || /^\s*[0-9a-zA-Z][0-9a-zA-Z ]*$/.test(value); 
     },"Required"); 

     $('#addProductForm').validate({ 
      rules: { 
       productName: { 
        minlength: 2, 
        maxlength: 40, 
        required: true, 
        checkmeout: true 
       }, 
       categoryPlaceholder: { 
        required: true, 
        errorClass: "testing" 
       }, 
       productDescriptionShort: { 
        minlength: 2, 
        maxlength: 250, 
        required: false, 
        checkmeout: true 
       }, 
       productDetailsLong: { 
        minlength: 2, 
        maxlength: 500, 
        required: true, 
        checkmeout: true 
       }, 
       productFCState: { 
        required: true 
       }, 
       productCategory: { 
        required: true 
       } 
      }, 

      messages: { 
        productName: { 
         minlength: "Your product name must be between 2 and 40 characters", 
         required: "" 
        }, 
        categoryPlaceholder: { 
         required: "" 
        }, 
        productDescriptionShort: { 
         minlength: "Your product description must be between 2 and 250 characters", 
         required: "" 
        }, 
        productDetailsLong: { 
         minlength: "Your product description must be between 2 and 500 characters", 
         required: "" 
        }, 
      }, 

      highlight: function(element) { 
       $(element).closest('.form-group').addClass('has-error'); 
      }, 

      unhighlight: function(element) { 
       $(element).closest('.form-group').removeClass('has-error'); 
      }, 

      errorElement: 'span', 
      errorClass: 'help-block-error', 
      errorPlacement: function(error, element) { 
       if(element.parent('.input-group').length) { 
        error.insertAfter(element.parent()); 
       } else if(element.parent('#productCategory').length) { 
        error.insertAfter('.list-group.list-group-root'); 
       } else { 
        error.insertAfter(element); 
       } 
      } 
     }); 
}); 
</script> 

#itemFeatured { 
    margin-bottom: 0; 
} 

.radio label::after { 
    background-color: #3390ce; 
} 

.height-initial { 
    height: initial; 
} 

#itemPricing .form-inline { 
    margin-bottom: 20px; 
} 

#itemPricing .form-inline label { 
    width: 120px; 
    padding-left: 5px; 
} 

<link href="https://cdnjs.cloudflare.com/ajax/libs/awesome-bootstrap-checkbox/0.3.7/awesome-bootstrap-checkbox.min.css" rel="stylesheet"/> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/additional-methods.min.js"></script> 




<form id="addProductForm"> 
<div id="itemPricing" class="clearfix"> 
    <div class="row"> 
    <div class="col-sm-12" form-group=""> 
     <label for="itemPricing" class="required" aria-required="true">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" aria-required="true">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" aria-required="true">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" aria-required="true">Email for Price</label> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 
    <div class="pull-right"> 
           <button type="submit" class="btn btn-success save ladda-button" data-style="zoom-in">Save</button> 
          </div> 
</form> 

Answer 1

我怎麼能驗證這種形式，使得需要在這個組的用戶必須選擇的無線選項之一，...？

只需製作它required。

$('#addProductForm').validate({ 
    rules: { 
     pricingOptions: { 
      required: true 
     }, .... 

您將不得不有條件地調整errorPlacement。

---

...如果它是前兩個中的一個，他們還必須在輸入數字？

有條件應用required規則基於無線設備選擇的文本字段...

$('#addProductForm').validate({ 
    rules: { 
     pricingOptions: { 
      required: true 
     }, 
     productPrice: { 
      required: function(element) { 
       return $('#regularPrice').is(':checked'); 
      } 
     }, 
     productPriceSale: { 
      required: function(element) { 
       return $('#salePrice').is(':checked'); 
      } 
     }, .... 

您不小心複製了productPrice場兩次在頁面上。你不能有重複id。

---

DEMO：jsfiddle.net/spr29o36/

Answer 2

首先，你應該聯繫當地的js文件，否則瀏覽器無法執行它：

<script src="yourfile.js"></script> 

接下來，你必須給一個ID你需要在你的js中使用每種形式，在這種情況下，你必須給這個按鈕一個id，例如，把你的html行改爲這個：

<button id="saveButton" type="submit" class="btn btn-success save ladda-button" data-style="zoom-in">Save</button> 

現在你將有機會獲得該按鈕，你將能夠驗證任何你想要的：

$(document).ready(function() { 
    $("#saveButton").click(function(){ 
     switch($('input[name=pricingOptions]:checked').val()){ 
      case "1": 
       if($("#productPrice").val() == "") 
        console.log("bad"); 
       else console.log("good"); 
       break; 
      case "2": 
       if($("#salePrice").val() == "") 
        console.log("bad"); 
       else console.log("good"); break; 
      case "3": console.log("good"); break; 
      default: console.log("bad"); 
     } 
    }); 
}); 

請注意，我拿pricingOptions的值，在HTML文件時，必須給出一個不同的價值每個無線電選項。