How Check if all inputs different from each other by parsley validator

Question

Sorry I'm a beginner *** I have 6 School Children id , and the teacher will put this ids or not important but he must put 1 minimum .. or when he put more of one must them be different from each other .

I used parsley.js to validate my test live here : jsfiddle

I tried to check more than 6 inputs if they are different from each other or not Because if the inputs are the same, a message appears on the similar field .. by parsley and jq . that what I did

    <form action="" id="homeform" method="POST" style="width: 100%;"  novalidate="novalidate">
  <input type="text" class="datac selector"  data-parsley-date="" name="m1" id="m1" />
 <input type="text" class="datac selector"  data-parsley-date="" name="m2" id="m2" />
 <input type="text" class="datac selector"  data-parsley-date="" name="m3" id="m3" />
 <input type="text" class="datac selector"  data-parsley-date="" name="m4" id="m4" />
 <input type="text" class="datac selector"  data-parsley-date="" name="m5" id="m5" />
 <input type="text" class="datac selector"  data-parsley-date="" name="m6" id="m6" />
    <button id="submit" type="submit">Check Out</button>

 </form>
<script type="text/javascript">

window.ParsleyValidator
    .addValidator(
        'date',
        function(value, requirements) {

    $(this).attr('value', $(this).val());
var values = []
$('.selector').each(function(){
if ($(this).val() != ''){
if(!values.includes(this.value)){
 values.push(this.value)
      return true;
         $(this).css("border-color", ""); 
   }else{
    values.push(this.value)
    $(this).css("border-color", "red");
      return false;

}   

}

});
},
        34
    )
    .addMessage('en', 'date', "Enter a valid date");
</script>

and there is anyway , I can marge JavaScript with parsley validator ?

This does not appear to be a complete example. please include a link to the library you are using and any other add ins. Please also provide a Minimal, Reproducible Example: https://stackoverflow.com/help/minimal-reproducible-example — Twisty, Jul 16 '21 at 17:16
Sorry I'm a beginner *** I have 6 School Children id , and the teacher will put this ids or not important but he must put 1 minimum .. or when he put more of one must them be different from each other . I used parsley.js to validate my test live here : [jsfiddle](https://jsfiddle.net/mssss/8aq9ebdx/9/) — mssss, Jul 16 '21 at 19:07

Twisty · Accepted Answer · 2021-07-16T23:43:45.800

Based on the details found here, https://parsleyjs.org/doc/index.html#custom the following example should be of use.

.selector {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.9.2/parsley.js" integrity="sha512-Fq/wHuMI7AraoOK+juE5oYILKvSPe6GC5ZWZnvpOO/ZPdtyA29n+a5kVLP4XaLyDy9D1IBPYzdFycO33Ijd0Pg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<form id="homeform" action="" method="post">
  <p>Enter Dates</p>
  <div data-parsley-check-empty="1">
    <input type="text" class="datac selector" data-parsley-unique-date="" data-parsley-group="block-1" name="m1" id="m1" />
    <input type="text" class="datac selector" data-parsley-unique-date="" data-parsley-group="block-1" name="m2" id="m2" />
    <input type="text" class="datac selector" data-parsley-unique-date="" data-parsley-group="block-1" name="m3" id="m3" />
    <input type="text" class="datac selector" data-parsley-unique-date="" data-parsley-group="block-1" name="m4" id="m4" />
    <input type="text" class="datac selector" data-parsley-unique-date="" data-parsley-group="block-1" name="m5" id="m5" />
    <input type="text" class="datac selector" data-parsley-unique-date="" data-parsley-group="block-1" name="m6" id="m6" />
  </div>
  <button id="submit" type="submit">Check Out</button>
</form>
<script>
  window.Parsley.addValidator(
    'uniqueDate', {
      validateString: function(value) {
        var count = 0;
        $(".selector").each(function(i, el) {
          if (value === $(el).val()) {
            count++;
          }
        });
        return (count <= 1);
      },
      messages: {
        en: 'All dates must be Unique.',
      }
    }
  );

  window.Parsley.addValidator(
    'checkEmtpy', {
      messages: {
        en: 'You must fill in at least one of these dates!'
      },
      requirementType: 'integer',
      validate: function(_value, requirement, instance) {
        console.log("Group Validation");
        for (var i = 1; i <= requirement; i++) {
          if (instance.parent.isValid({
              group: 'block-' + i,
              force: true
            })) {
            return true; // One section is filled, this check is valid
          }
        }
        return false; // No section is filled, this validation fails
      }
    });

  var formInstance = $("#homeform").parsley({
      inputs: Parsley.options.inputs + ',[data-parsley-check-empty]'
    })
    .on('form:submit', function() {
      console.log("Submit Event");
      return false; // Don't submit form for this demo
    });
</script>

Firstly, your Syntax was incorrect. The .addValidator() appears to require s String corresponding to the data attribute and a Object defining the details.

You stated you wanted each field to have a unique value. There should only be one or less of the value as the validator inspects each field. We assume a failure and start a count. We then iterate over each field and compare our value to the value for each and increase the count if they match. We know it must match at least one of them, the one we're validating. If the count is less than or equal to 1, we can return a Valid response.

I understand you, but I still get an error and the form is not working ... I don't why :( can you please check it here : [jsfiddle](https://jsfiddle.net/mssss/8aq9ebdx/12/) — mssss, Jul 16 '21 at 21:18
@mssss I just updated the answer. I had to dig through the documents a lot more. I switched it over to a `validateString` and adjusted the selector to be a more unique item. — Twisty, Jul 16 '21 at 21:39
@mssss here is a working fiddle too: https://jsfiddle.net/Twisty/5s1f4aLc/ — Twisty, Jul 16 '21 at 21:47
I learned a lot from you, thank you very much, How i can if I want to make sure I have to add value in at least one input ? — mssss, Jul 16 '21 at 21:53
@mssss just add the `required=""` attribute to at least one of the fields. — Twisty, Jul 16 '21 at 21:58
if i add required="" that will make this input only required , but if i add value to another input will not working .. are you understand me ? so i must make that in the loop or in the script we did . — mssss, Jul 16 '21 at 22:06
@mssss I do not understand. See the fiddle: https://jsfiddle.net/Twisty/5s1f4aLc/6/ you can see `required=""` is on the first field but not the others. This requires at least that one to be filled in. This means the user cannot submit without filling in that one field. If they fill in others as well, thats okay. — Twisty, Jul 16 '21 at 22:13
exp : now the first input will required only but If they fill in others not the first input the form will appear the first input required . now it clear ? i want the user add any input not must the first input . — mssss, Jul 16 '21 at 22:18
@mssss Ok, to confirm, you want the User to be able to enter a date in at least one field, not the first itself. I think that can be a group requirement. I will check. — Twisty, Jul 16 '21 at 22:20
Yes.you are right that what i looking for , that user can fill any input Not a specific one . — mssss, Jul 16 '21 at 22:26
@mssss I reviewed this: https://parsleyjs.org/doc/examples/custom-validator-events.html and updated my answer. It does not seem to work, even though it should. The alternative would be to put this type of check in the `form:submit` callback. — Twisty, Jul 16 '21 at 23:43
Oh ! that same what happened with me , i found it and I tried to test it . — mssss, Jul 17 '21 at 00:37

How Check if all inputs different from each other by parsley validator

1 Answers1