CODEWITHSUNDEEP
javascriptjqueryjquery-validate
tina
tina

Reputation: 243

jQuery validate some input must be different from each other

EDIT2:

I feel I'm near the solution. Following the vicgoyso's suggestion I created some object from my inputs (and not arrays), and then I compared them: see the jsfiddle

Since this comparison is working: comparison on jsfiddle I would expect the code above to work as well, but it's not.

EDIT: The jQuery method I was working on is similar to this:

$().ready(function(){
    $.validator.addMethod("same_names", function(value, element) {
        if (!$('#surname').val() || $('#surname').val() != null 
                && !$('#surname1').val() || $('#surname1').val() != null){
            return $('#name').val() != $('#name1').val() 
            && $('#surname').val() != $('#surname1').val() 
            && $('#nickname').val() != $('#nickname1').val()
        }

        }, " Your input is equal to another");

    $("#myForm").validate({
        rules: {
            name: {
                required: false,
                same_names: true
            },
            name1: {
                required: false,
                same_names: true
            },
            surname: {
                required: false,
                same_names: true
            },
            surname1: {
                required: false,
                same_names: true
            },
            nickname: {
                required: false,
                same_names: true
            },
            nickname1: {
                required: false,
                same_names: true
            },
        },
        messages: {
         ...
        }
    })
});

It continue say that name, surname and nickname are required, and they are not. Without jQuery my method is similar to this:

$('#myForm').submit(function (event) {
    var errors = false;
    if ($('#name').val() == $('#name1').val() &&
        $('#surname').val() == $('#surname1').val() &&
        $('#nickname').val() == $('#nickname1').val()
        ||
        $('#name').val() == $('#name2').val() &&
        $('#surname').val() == $('#surname2').val() &&
        $('#nickname').val() == $('#nickname2').val()
        ||
        $('#name').val() == $('#name3').val() &&
        $('#surname').val() == $('#surname3').val() &&
        $('#nickname').val() == $('#nickname3').val()
        ||
        $('#name').val() == $('#name4').val() &&
        $('#surname').val() == $('#surname4').val() &&
        $('#nickname').val() == $('#nickname4').val()
        ....
        ||
        $('#name').val() == $('#name10').val() &&
        $('#surname').val() == $('#surname10').val() &&
        $('#nickname').val() == $('#nickname10').val()
        ||
        $('#name1').val() == $('#name2').val() &&
        $('#surname1').val() == $('#surname2').val() &&
        $('#nickname1').val() == $('#nickname2').val()
        ||
        $('#name1').val() == $('#name3').val() &&
        $('#surname1').val() == $('#surname3').val() &&
        $('#nickname1').val() == $('#nickname3').val()
        .... and so on
        ) {
        $("#error").show(); 
        location.href = "#";
                location.href = "#error";
            errors = true;
    } else { 
      errors = false; 
      $("#error").hide();
    }
    if (errors == true) {
      event.preventDefault();
    }
});

My actual jsp is similar to this (there are 10 input groups, formed by name + surname + nickname):

<form id="myForm" method="post">
<input id="name" name="name" />
<input id="surname" name="surname" />
<input id="nickname" name="nickname" />
    <br/ >
<input id="name1" name="name1" />
<input id="surname1" name="surname1" />
<input id="nickname1" name="nickname1" />
<br/>
<input id="name2" name="name2" />
<input id="surname2" name="surname2" />
<input id="nickname2" name="nickname2" />
    <br />
<input id="name3" name="name3" />
<input id="surname3" name="surname3" />
<input id="nickname3" name="nickname3" />
    <br />
    <br />
<input id="submit" type="submit" value="submit" />   
</form>

I want to be an error just if one of this group (name, surname, nickname) is equal to another, for example this is an error:

But this one is not:

QUESTION What if I want to use this code:
https://stackoverflow.com/a/16965721/4477899

To solve this problem here:
Form validate some input must be different from each other

I'm asking because I'm already using jQuery validate, and the previous approach is not working well if fields are more than two groups, or are empty (those fields are not required).

Upvotes: 0

Views: 1571

Answers (2)

Sparky
Sparky

Reputation: 98738

Regarding this part only:

EDIT2:

I feel I'm near the solution. Following the vicgoyso's suggestion I created some object from my inputs (and not arrays), and then I compared them: see the jsfiddle

Since this comparison is working: comparison on jsfiddle I would expect the code above to work as well, but it's not.

You failed to include jQuery itself in the jsFiddle.

Mainly it wouldn't work anyway because your boolean logic is backwards. You are getting true when you find a match. However, you then return true from the addMethod() method, so with a true you are telling it to PASS validation. To fail validation, you must return false instead.

return !duplicateFound;

Finally, to make the fields optional, you'll need a little more logic...

return this.optional(element) || !duplicateFound;

DEMO: https://jsfiddle.net/awb4tcyy/3/

As a general note, your code will get incredibly complex as you scale with more groups of fields. I would suggest you leverage some type of looping algorithm. Good luck.

Upvotes: 1

vicgoyso
vicgoyso

Reputation: 616

You first need to define a custom validation method: https://jqueryvalidation.org/jQuery.validator.addMethod/

jQuery.validator.addMethod("laxEmail", function(value, element) {
   var duplicateFound = false;

  //apply input values in array
  //check for duplicates
  duplicateFound = true; //update variable if duplicate found 

  return duplicateFound;
}, 'Input values cannot be identical');

In your custom validation, get/store the input values in an array: jQuery get values from inputs and create an array

then check array for duplicates, return true if duplicate is found: How can I check if the array of objects have duplicate property values?

You then add the name of your custom validation rule to the input validation like so:

myForm.validate({
  rules: {
   myCustomRule: {
      required: true
   }
  },
  messages {
   myCustomRule: {
     required: "Input values cannot be identical"
   }
  }
});

Upvotes: 0

Related Questions