Parsley JS - 将 Select 的最小数量设置为值的自定义验证器

Question

我有一个表格，我需要在其中验证至少有 5 个 select 框设置为是（或 .表单并显示错误。因此，我需要一个自定义验证器。

我创建了一个 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 select 框是否设置为是。我还需要将错误消息仅显示在设置为否的 select 框中。

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://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'}
});

Answer 1

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

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

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

中获得灵感

Answer 2

成功了。方法如下。

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'
  }
});

Parsley JS - 将 Select 的最小数量设置为值的自定义验证器

Parsley JS - Custom Validator for Minimum Number of Select Set to Value

javascript

jquery

parsley

parsley.js