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

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 ?

CodePudding user response：

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.