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
– Jurik, Commented Jun 10, 2016 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: stackoverflow.com/help/mcve — Sparky
– Sparky, Commented Jun 10, 2016 at 13:49
You are right, @Sparky, I'm sorry, I left that out, but it works now — 4Jean
– 4Jean, Commented Jun 10, 2016 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
– Sparky, Commented Jun 10, 2016 at 14:11

Nenad Vracar · Accepted Answer · 2016-06-10 13:52:06Z

6

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>

edited Jun 10, 2016 at 13:52

answered Jun 10, 2016 at 13:34

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nenad Vracar Over a year ago

You're welcome. This method to check for duplicates is better then previous one.

Collectives™ on Stack Overflow

JQuery Validation for Duplicates in Form Array

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related