JQuery Validation for Duplicates in Form Array

Question

I want to display error for values that are duplicates or not unique, but my form takes in array of inputs, I have checked these questions on jsfiddle, name = "week[]" fails but name = "week" works fine

Form HTML

<html>
    <head></head>
    <body>
        <form name = "myForm" id = "myForm" class ="validate">
            <input type="number" name="week[]" id="week1"/>
            <input type="number" name="week[]" id="week2"/>
            <input type="number" name="week[]" id="week3"/>
            <input type="number" name="week[]" id="week4"/>
        </form>
        <script src="assets/js/jquery.validate.min.js"></script>
    </body>
</html>

I tried this

<script type="text/javascript">
    jQuery.validator.addMethod("unique", function(value, element, params) {
        var prefix = params;
        var selector = jQuery.validator.format("[name!='{0}'][unique='{1}']", element.name, prefix);
        var matches = new Array();
        $(selector).each(function(index, item) {
            if (value == $(item).val()) {
                matches.push(item);
            }
        });

        return matches.length == 0;
    }, "Value is not unique.");

    jQuery.validator.classRuleSettings.unique = {
        unique: true
    };
</script>

Any help is appreciated

First of all an `id` should be unique. And please show us your code that validates the input fields... or at least what you have tried so far. — Jurik, Jun 10 '16 at 13:29
**Where is the rest of the relevant code?** Where is your call to `.validate()` and the HTML markup of the form? See: http://stackoverflow.com/help/mcve — Sparky, Jun 10 '16 at 13:49
You are right, @Sparky, I'm sorry, I left that out, but it works now — 4Jean, Jun 10 '16 at 13:55
So what about helping other people? If your question is unclear because you left out too much code, then few people will find it helpful. — Sparky, Jun 10 '16 at 14:11
I removed the [tag:jquery-validate] tag since you have not shown the `.validate()` method (plugin initialization), and accepted a solution that has nothing to do with the jQuery Validate plugin. — Sparky, Jun 10 '16 at 15:45

Nenad Vracar · Accepted Answer · 2016-06-10T13:52:06.130

You can create array of input values with map() and then check for duplicates in array and show/hide error message

$('#myForm input').on('change', function() {

  //Create array of input values
  var ar = $('#myForm input').map(function() {
    if ($(this).val() != '') return $(this).val()
  }).get();

  //Create array of duplicates if there are any
  var unique = ar.filter(function(item, pos) {
    return ar.indexOf(item) != pos;
  });

  //show/hide error msg
  (unique.length != 0) ? $('.error').text('duplicate'): $('.error').text('');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="myForm" id="myForm">
  <input type="number" name="week[]" id="week1">
  <input type="number" name="week[]" id="week2">
  <input type="number" name="week[]" id="week3">
  <input type="number" name="week[]" id="week4">
</form>
<div class="error"></div>

You're welcome. This method to check for duplicates is better then previous one. — Nenad Vracar, Jun 10 '16 at 13:52

JQuery Validation for Duplicates in Form Array

1 Answers1

Linked