0

Im trying to write a validation for 2 groups of fields. I have 6 inputs, 3 for text name and 3 more for id number... the validation should do this "if input name="RE_SignedByID" has an input type name="RE_SignedByName", then other inputs name="RE_SignedByID", should NOT contain the same name="RE_SignedByName" More easy explanation... one ID number should have only one Person Name (Id number is unique for one person name). What can I use for that? Should I map() all the inputs? Those are my inputs:

<div id="signedBy" class="clearfix">
    <label>Signer, person ID & name</label>
    <span id="signedByID" class="ids half">
        <input type="text" name="RE_SignedByID" placeholder="personID, person1" data-validate="" tabindex="101" required>
        <input type="text" name="RE_SignedByID" placeholder="personID, person2" data-validate="" tabindex="103">
        <input type="text" name="RE_SignedByID" placeholder="personID, person3" data-validate="" tabindex="105">
    </span>
    <span class="names half">
        <input type="text" name="RE_SignedByName" placeholder="name, person1" tabindex="102" required>
        <input type="text" name="RE_SignedByName" placeholder="name, person2" tabindex="104">
        <input type="text" name="RE_SignedByName" placeholder="name, person3" tabindex="106">
    </span>
</div>

I guess it should also be an "on change" function? or can I make the validation on click? Some ideas...? Im actually compleatley lost here... Thanks in advance!!!

Cristiano Soares
  • 619
  • 1
  • 9
  • 20
Fernando Lopez
  • 31
  • 1
  • 10

3 Answers3

0

Maybe use different class names for all 3 of them to make them unique?

<input class="name1">
<input class="name2">
<input class="name3">

I'm not sure what you mean but if you want to make the input types unique and not call them all when you write class="names half", then you should give them all unique class names.

0

So from my understanding you don't want multiple fields to have the same value. My approach would be this:

let inputTimeout = null; //set an empty timeout object
let vars = [null, null, null, null]; // create an array containing as many nulls as you have inputs
$('.nameInput').on('keyup', function(){
    let self = $(this);
    clearTimeout(inputTimeout); //clear the timeout
    inputTimeout = setTimeout(function(){ //set a timeout to check whether there is a dupe after the user has stopped typing
        if (vars.indexOf(self.val()) == -1){ //check if the vals array contains the newly entered string
            vars[self.attr('data-inputnum')] = self.val(); //insert the value into the array
        }else{
            //handle duplicates here
        }
    }, 500); //500ms is a sensible value for end of user input, change it if users complain that your app is too fast/slow
});

You then just have to edit your HTML a bit so that all name inputs have a class in common (i used .nameInput) and have a data-inputnum attr. This would look something like this:

<input type="text" name="RE_SignedByName" placeholder="name, person1" tabindex="102" class='nameInput' data-whichinput='0'/>
<input type="text" name="RE_SignedByName" placeholder="name, person2" tabindex="103" class='nameInput' data-whichinput='1'/>
<!--and so on-->

Of course, never rely on JavaScript verification alone, always also check inside your backend. However this would be out of scope for this answer.

DysphoricUnicorn
  • 495
  • 7
  • 16
0

Hi Thanks all for the help, made me realize a couple of things till I got the answer. This is my working code:

var valSignedID = $("[name=SignedByID]").map(function() {
            return this.value.trim();
        }).get();

 var valOwnersID = $("[name=OwnersID]").map(function() {
            return this.value.trim();
        }).get();

 valSignedID.sort();
 valOwnersID.sort();

for (var i = 0; i < valSignedID.length - 1; i++) {
        if (valSignedID[i] == valSignedID[i + 1] && valSignedID[i] != "") {
            alert(" You can not have duplicated signers ID's");
                return false;
            //  break;
            }
        }
for (var i = 0; i < valSingedName.length; i++) {
        if (valSingedName[i] == valSingedName[i + 1] && valSingedName[i] != "")         {
            alert(valSingedName[i] + " should not have different ID");
            //return false;
            }
        }
Fernando Lopez
  • 31
  • 1
  • 10