javascript - Parsley JS 不等于多个 ID
问题描述
我有一个带有多个选择框的表单,需要确保没有在其中任何一个中设置相同的值。例如,如果选择框 1 设置为 2,并且选择框 4 也设置为 2,我应该会收到错误消息。我可以使用单个 ID 进行此操作,但无法使用逗号分隔的多个 ID 进行操作。
另一个要求是,一旦用户纠正了错误并且不需要再次提交表单,我需要 Parsley 验证 .change 。
仅适用于单个 ID 的代码是:
window.Parsley.addValidator("notequalto", {
requirementType: "string",
validateString: function(value, element) {
return value !== $(element).val();
}
});
我目前拥有的验证码是:
var validating;
$("#postorg").parsley();
$('#series_post_order1').change(()=>{
if(!validating) return; $("#postorg").parsley().validate({group:'postorder'});
});
$('#series_post_order2').change(()=>{
if(!validating) return; $("#postorg").parsley().validate({group:'postorder'});
});
$('#series_post_order3').change(()=>{
if(!validating) return; $("#postorg").parsley().validate({group:'postorder'});
});
$('#series_post_order4').change(()=>{
if(!validating) return; $("#postorg").parsley().validate({group:'postorder'});
});
window.Parsley.addValidator("notequalto", {
validateMultiple: function(values) {
return values.length > 0;
},
requirementType: "string",
validateString: function(value, element) {
var els=element.split(',');
for(let i=0;i<els.length;i++){
if (jQuery(els[i]).val()){
return value !== $(element).val();
}
}
return true;
},
priority: 33
});
表格如下所示:
<form name="series_edit_postorg" id="postorg" method="post" action="series_postorg">
<div class="formbig-mobile">
<select name="series_post_order1" class="select" id="series_post_order1" data-parsley-group="postorder" data-parsley-notequalto="#series_post_order2,#series_post_order3,#series_post_order4" data-parsley-notequalto-message="Each post must have a different number">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select name="series_post_order2" class="select" id="series_post_order2" data-parsley-group="postorder" data-parsley-notequalto="#series_post_order1,#series_post_order3,#series_post_order4" data-parsley-notequalto-message="Each post must have a different number">
<option value="2" selected>2</option>
<option value="1">1</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<select name="series_post_order3" class="select" id="series_post_order3" data-parsley-group="postorder" data-parsley-notequalto="#series_post_order1,#series_post_order2,#series_post_order4" data-parsley-notequalto-message="Each post must have a different number">
<option value="3" selected>3</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="4">4</option>
</select>
</div>
<select name="series_post_order4" class="select" id="series_post_order4" data-parsley-group="postorder" data-parsley-notequalto="#series_post_order1,#series_post_order2,#series_post_order3" data-parsley-notequalto-message="Each post must have a different number">
<option value="4" selected>4</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<input type="submit" name="submit" value="UPDATE" class="selectbutton">
</form>
解决方案
这是解决此问题的答案:
var validating;
$("#postorg").parsley();
$('.select').change(()=>{
if(!validating) return; $("#postorg").parsley().validate({group:'postorder'});
});
window.Parsley.addValidator("notequalto", {
validateMultiple: function(values) {
return values.length > 0;
},
requirementType: "string",
validateString: function(value, requirement) {
validating = true;
var $otherElements = $(requirement);
var duplicateFound = false;
$otherElements.each(function(){
duplicateFound = duplicateFound || this.value === value;
});
return !duplicateFound;
},
priority: 33
});
推荐阅读
- php - 更新本地化数组值
- java - RestTemplate 测试时出现错误请求
- workfront-api - 如何在 Postman 中获取 Workfront 对象的所有字段?
- sql - 同一张表的迭代查询
- javascript - 如何获取用户输入并将其输出到网页上
- java - 如何使用 Java 获得 AzureRateCard?
- java - 如何在测试类中触发 XMLStreamException
- c# - 根据请求参数在运行时创建 EF Core DbContext
- asp.net-core - .Net Core 中的 SubreportProcessingEventArgs
- c++ - 如何在调整 QTableView 大小时动态更改列数?