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

Question

I have a form where I need to validate that there are at least 5 select boxes set to Yes (or . If there are more that's fine, but if there are less I need it to not submit the form and show an error. Thus, I need a custom validator.我有一个表单，我需要验证至少有 5 个选择框设置为 Yes（或 . 如果有更多，那很好，但如果更少，我需要它不提交表单并显示错误。因此，我需要一个自定义验证器。

I've created a jsfiddle to show a full example https://jsfiddle.net/kittonian/v9w8rgeb/我创建了一个 jsfiddle 来展示一个完整的例子https://jsfiddle.net/kittonian/v9w8rgeb/

Additionally, here is the sample code:此外，这里是示例代码：

 <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>

And here is the current JS invoking Parsley.这是当前调用 Parsley 的 JS。 It is only validating the duplicates and not checking if 5 select boxes are set to Yes.它只验证重复项，而不检查 5 个选择框是否设置为是。 I also need the error message to only show up on the select boxes set to No.我还需要错误消息只显示在设置为 No 的选择框上。

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

Answer 1

Validation depending on multiple inputs is not easy.根据多个输入进行验证并不容易。

There is no builtin way to do this.没有内置的方法可以做到这一点。

You can write your own custom validator.您可以编写自己的自定义验证器。 You may want to inspire yourself from this example你可能想从这个例子中激励自己

Answer 2

Got it working.得到它的工作。 Here's how to do it.这是如何做到的。

HTML: 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: 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 - 最小数量选择设置为值的自定义验证器

问题描述

2 个解决方案

解决方案1
0 2020-09-15 20:53:01

解决方案2
0 已采纳 2020-09-16 02:43:28

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

问题描述

2 个解决方案

解决方案1 0 2020-09-15 20:53:01

解决方案2 0 已采纳 2020-09-16 02:43:28

解决方案1
0 2020-09-15 20:53:01

解决方案2
0 已采纳 2020-09-16 02:43:28