我想在每个复选框组的每个复选框组旁边显示验证错误。我已经为每个创建了span元素,并希望显示错误,但是对于每个复选框组,它都不会显示在复选框旁边。而是显示第一个复选框组旁边的每个复选框所需的错误。如何实现呢?
在下面的图像中,验证消息显示在第一个复选框组的旁边。
这是HTML文件,
<div class="other-complain-right">
<ul>
<li>
<input type="checkbox" class="radio" value="1" name="IsBppStandard">
<label>Yes</label>
<input type="checkbox" class="radio" value="1" name="IsBppStandard">
<label>No</label>
<span id="ErrorIsBppStandard"></span>
</li>
<li>
<input type="checkbox" class="radio" value="1" name="IsKycNorm">
<label>Yes</label>
<input type="checkbox" class="radio" value="1" name="IsKycNorm">
<label>No</label>
<span id="ErrorIsKycNorm"></span>
</li>
<li>
<input type="checkbox" class="radio" value="1" name="IsKpcsSystem">
<label>Yes</label>
<input type="checkbox" class="radio" value="1" name="IsKpcsSystem">
<label>No</label>
<span id="ErrorIsKpcsSystem"></span>
</li>
<li>
<input type="checkbox" class="radio" value="1" name="IsIndustryPractice">
<label>Yes</label>
<input type="checkbox" class="radio" value="1" name="IsIndustryPractice">
<label>No</label>
<span id="ErrorIsIndustryPractice"></span>
</li>
<li>
<select>
<option>Select Property</option>
</select>
<input type="text" name="" placeholder="Other">
</li>
</ul>
</div>
验证功能如下
$("#kycFormTab4").validate({
errorLabelContainer: '#ErrorIsBppStandard',
//errorLabelContainer: '#ErrorIsKycNorm',
//errorLabelContainer: '#ErrorIsKpcsSystem',
//errorLabelContainer: '#ErrorIsIndustryPractice',
rules: {
'IsBppStandard': {
required: true,
},
'IsKycNorm': {
required: true,
},
'IsKpcsSystem': {
required: true,
},
'IsIndustryPractice': {
required: true,
}
},
//specify validation error messages
messages: {
'IsBppStandard': {
required: "You must check at least 1 box",
},
'IsKycNorm': {
required: "You must check at least 1 box",
},
'IsKpcsSystem': {
required: "You must check at least 1 box",
},
'IsIndustryPractice': {
required: "You must check at least 1 box",
}
}
//submitHandler: function(form){
// form.submit();
//}
});
您的问题是因为您正在使用errorLabelContainer
,并将其设置为单个元素。这意味着所有错误都将放置在同一位置。
为了解决这个问题,您需要errorPlacement
改用它,它可用于根据引起错误的元素返回放置错误的位置,如下所示:
$("#kycFormTab4").validate({
errorPlacement: function($error, $element) {
$error.appendTo($element.closest("li"));
},
rules: {
'IsBppStandard': {
required: true,
},
'IsKycNorm': {
required: true,
},
'IsKpcsSystem': {
required: true,
},
'IsIndustryPractice': {
required: true,
}
},
messages: {
'IsBppStandard': {
required: "You must check at least 1 box",
},
'IsKycNorm': {
required: "You must check at least 1 box",
},
'IsKpcsSystem': {
required: "You must check at least 1 box",
},
'IsIndustryPractice': {
required: "You must check at least 1 box",
}
}
});
.error {
color: #C00;
}
<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.17.0/jquery.validate.min.js"></script>
<form id="kycFormTab4">
<div class="other-complain-right">
<ul>
<li>
<input type="checkbox" class="radio" value="1" name="IsBppStandard">
<label>Yes</label>
<input type="checkbox" class="radio" value="1" name="IsBppStandard">
<label>No</label>
<span id="ErrorIsBppStandard"></span>
</li>
<li>
<input type="checkbox" class="radio" value="1" name="IsKycNorm">
<label>Yes</label>
<input type="checkbox" class="radio" value="1" name="IsKycNorm">
<label>No</label>
<span id="ErrorIsKycNorm"></span>
</li>
<li>
<input type="checkbox" class="radio" value="1" name="IsKpcsSystem">
<label>Yes</label>
<input type="checkbox" class="radio" value="1" name="IsKpcsSystem">
<label>No</label>
<span id="ErrorIsKpcsSystem"></span>
</li>
<li>
<input type="checkbox" class="radio" value="1" name="IsIndustryPractice">
<label>Yes</label>
<input type="checkbox" class="radio" value="1" name="IsIndustryPractice">
<label>No</label>
<span id="ErrorIsIndustryPractice"></span>
</li>
<li>
<select>
<option>Select Property</option>
</select>
<input type="text" name="" placeholder="Other">
</li>
</ul>
</div>
<button>Submit</button>
</form>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句