我正在使用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>
答案 0 :(得分：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/
答案 1 :(得分：-1)
首先，你应该链接你的本地js文件，否则浏览器无法执行它：
<script src="yourfile.js"></script>
接下来，您必须为您在js中需要的每个表单提供一个id，在这种情况下，您必须为该按钮指定一个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文件中，您必须为每个无线电选项提供不同的值。