Asking fields to be unique

Sometime the user need to fill multiple fields in form, also each of them must be unique. Any of them has to be different to the remaining. You might think of using the different validator which requires two fields to be different to each other, such as an username and password shouldn't be the same. In our case, the different validator isn't useful because the number of fields for doing comparison are unknown.

The form in this example asks user to provide some email addresses. User is also required to fill at least one email address. Each of them, if present, must be unique. This kind of form can be seen in a lot of forms nowadays.

The approach illustrated in this example is that:

  • Use the emailAddress validator to ensure each field need to be a valid email address
  • Use the callback validator to check if the list of email addresses consist duplicated item
  • If all fields pass these validators, we then use the updateFieldStatus() method to set them as valid fields

That are straight forward steps. The next sections show the implementation in details.

Checking duplicate items in array

In order to check whether an array contains duplicated items or not, we can use a simple implementation:

Since the array of email addresses might consist of empty item, we need to adjust the code above a little bit to ensure that the array has at least one not-empty item and doesn't contain any duplicated items:

Using the same names

The example code below demonstrates the implementation when all email fields use the same names, email[], for example.

Using different names

What if the email fields have different names? How we can set the validator rules for them?

In this case, we can use a same CSS class for all email fields:

and then use the selector option to apply the same set of validation rules for them:

More examples

Related validators

The following validators might be useful to you.