Parsley JS不等于多个ID。

问题描述 投票:0回答:1

我有一个带有多个选择框的表单,需要确保其中任何一个选择框都不设置相同的值。例如,如果选择框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>
javascript jquery forms validation parsley.js
1个回答
0
投票

下面是解决这个问题的答案。

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
});
© www.soinside.com 2019 - 2024. All rights reserved.