Parsley JS-用于将选择的最小数量设置为Value的自定义验证器

如何解决Parsley JS-用于将选择的最小数量设置为Value的自定义验证器

我有一个表单，我需要确认至少有5个选择框设置为“是”（或。如果有更多选择框是可以的，但是如果数量较少，我需要它不提交表单并显示错误因此，我需要一个自定义验证器。

我创建了一个jsfiddle来显示完整的示例https://jsfiddle.net/kittonian/v9w8rgeb/

此外，这是示例代码：

<html>
<head></head>
<body>

<form name="select_test" id="postfeatured" method="post" action="#">

<div class="choice">

<div>
<select name="post_featured1" id="post_featured1" class="select enabled" data-parsley-group="minselect" data-parsley-enabled="1">
<option value="t">Y</option>
<option value="f">N</option>
</select>
</div>

<div>
<select name="post_featured2" id="post_featured2" class="select enabled" data-parsley-group="minselect" data-parsley-enabled="2">
<option value="t">Y</option>
<option value="f">N</option>
</select>
</div>

<div>
<select name="post_featured3" id="post_featured3" class="select enabled" data-parsley-group="minselect" data-parsley-enabled="3">
<option value="t">Y</option>
<option value="f">N</option>
</select>
</div>

<div>
<select name="post_featured4" id="post_featured4" class="select enabled" data-parsley-group="minselect" data-parsley-enabled="4">
<option value="t">Y</option>
<option value="f">N</option>
</select>
</div>

<div>
<select name="post_featured5" id="post_featured5" class="select enabled" data-parsley-group="minselect" data-parsley-enabled="5">
<option value="t">Y</option>
<option value="f">N</option>
</select>
</div>

<div>
<select name="post_featured6" id="post_featured6" class="select enabled" data-parsley-group="minselect" data-parsley-enabled="6">
<option value="t">Y</option>
<option value="f">N</option>
</select>
</div>
</div>

<div class="submit">
<input type="submit" value="SUBMIT" class="submitbutton">
</div>

</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.9.2/parsley.min.js" integrity="sha512-eyHL1atYNycXNXZMDndxrDhNAegH2BDWt1TmkXJPoGf1WLlNYt08CSjkqF5lnCRmdm3IrkHid8s2jOUY4NIZVQ==" crossorigin="anonymous"></script>

</body>
</html>

这是当前调用Parsley的JS。它仅验证重复项，而不检查5个选择框是否设置为“是”。我还需要错误消息仅显示在设置为“否”的选择框上。

var validating;

$("#postfeatured").parsley();

$('select.enabled').change(()=>{
 if(!validating) return; $("#postfeatured").parsley().validate({group:'minselect'});
});

window.Parsley.addValidator("enabled",{
      validateMultiple: function(values) {
        return values.length > 0;
      },requirementType: "string",validateString: function(value,current) {
      validating=true;
     var els=$('select[id^="post_featured"]');
     ar=[];
     for(let i=0;i<els.length;i++) ar.push(jQuery(els[i]).val());
      // first simply find if there are any dupes
      // https://stackoverflow.com/a/7376645
      // https://www.geeksforgeeks.org/how-to-convert-set-to-array-in-javascript/
     var sar=Array.from(new Set(ar));
     if(sar.length !== ar.length){
      // there are dupes
       // returning false here makes ALL fields show an error,so we have to find out which ones are dupes and check if current is one of them
       // for each filtered (Set array) value,check if more than one and if so return false if equal to current field value
       for(let i=0;i<sar.length;i++){
         var cnt=0;
         for(let j=0;j<ar.length;j++){
           if(ar[j]===sar[i]) cnt++;
         }
         if(cnt>1 && $('#post_featured'+current).val()==sar[i]) return false;
       }
     }
     return true;
   },priority: 33,messages: {en: 'You must have at least 5 featured posts'}
});

解决方法

根据多个输入进行验证并不容易。

没有内置方法可以做到这一点。

您可以编写自己的自定义验证器。您可能想从this example

启发自己 ,

使其正常工作。这是这样做的方法。

HTML：

<html>
<head></head>
<body>

<form name="select_test" id="postfeatured" method="post" action="#">

<div class="choice">

<div>
<select name="post_featured1" id="post_featured1" class="select enabled" data-parsley-group="minselect" data-parsley-enabled="1">
<option value="t">Y</option>
<option value="f">N</option>
</select>
</div>

<div>
<select name="post_featured2" id="post_featured2" class="select enabled" data-parsley-group="minselect" data-parsley-enabled="2">
<option value="t">Y</option>
<option value="f">N</option>
</select>
</div>

<div>
<select name="post_featured3" id="post_featured3" class="select enabled" data-parsley-group="minselect" data-parsley-enabled="3">
<option value="t">Y</option>
<option value="f">N</option>
</select>
</div>

<div>
<select name="post_featured4" id="post_featured4" class="select enabled" data-parsley-group="minselect" data-parsley-enabled="4">
<option value="t">Y</option>
<option value="f">N</option>
</select>
</div>

<div>
<select name="post_featured5" id="post_featured5" class="select enabled" data-parsley-group="minselect" data-parsley-enabled="5">
<option value="t">Y</option>
<option value="f">N</option>
</select>
</div>

<div>
<select name="post_featured6" id="post_featured6" class="select enabled" data-parsley-group="minselect" data-parsley-enabled="6">
<option value="t">Y</option>
<option value="f">N</option>
</select>
</div>
</div>

<div class="submit">
<input type="submit" value="SUBMIT" class="submitbutton">
</div>

</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.9.2/parsley.min.js" integrity="sha512-eyHL1atYNycXNXZMDndxrDhNAegH2BDWt1TmkXJPoGf1WLlNYt08CSjkqF5lnCRmdm3IrkHid8s2jOUY4NIZVQ==" crossorigin="anonymous"></script>

</body>
</html>

JS：

var validating;

$("#post_featured").parsley();

$('select.enabled').change(() => {
  if (!validating) return;
  $("#post_featured").parsley().validate({
    group: 'minselect'
  });
});

window.Parsley.addValidator("enabled",{
  validateMultiple: function(values) {
    return values.length > 0;
  },requirementType: "string",validateString: function(value,current) {
    validating = true;
    var currentYesCount = $('#post_featured select').filter(function() {
      return $(this).val() === 't';
    }).length;
   if (value === 't') {
     return true;
    } else {
      if (currentYesCount > 4) {
        return true;
      } else {
        return false;
      }}
  },priority: 33,messages: {
    en: 'You must have at least 5 posts set to Yes'
  }
});