Mulltiple Javascripts

[jPaul]

Hi Everybody,

I have two pop-up modals on this page.

The first is a Register form requiring a Password input and a Confirm Password input. The Password ID is "PW1" and the Confirm Password ID is "PW2". The validation javascript script is PasswordVerification1.

The second is a Forgot Password form, also requiring a Password input and a Confirm Password input. The Password ID is "PW3" and the Confirm Password ID is "PW4". The validation javascript script is PasswordVerification2.

https://www.dropbox.com/scl/fi/vby2snhl ... yi4h&raw=1

The issue that I have is that the two PasswordVerification scripts will not execute unless I delete one of them. Then the other will function.

What am I doing wrong and how can I have multiple <HTML/javascripts> on the same document?

[wwonderfull]

There is usually no support for custom scripts which you are implementing yourself as only you know what you are doing.

But as you wrote the form being a Register form then it must have had or needed a backend server sided programing language connected to it If I am not incorrect. Because JavaScript works on the client side which can get response from server side. What you are trying to do with the scripts I think is more like a script providing real-time feedback to the user indicating whether the two passwords match, using dynamic color stylings.

[BaconFries]

The issue that I have is that the two PasswordVerification scripts will not execute unless I delete one of them. Then the other will function. What am I doing wrong and how can I have multiple <HTML/javascripts> on the same document?

You have really answered your own question you can't have two identical scripts on the same page as it breaks the page structure and there functionality. For it to work each would need to be unique such as if using externally Example: script1.js, script2.js then it reads each separately and called individually and not as one of the same. The same applies when using versions of jquery.

[pmacdonald]

Hello,

If you really want this to work as is, you need to modify your two html objects.

1. In the first object this line: let isPasswordsMatch = false; should be moved into the function you defined like this:
<script>
/*Find input elements with the ID (PW1, PW2)*/
const pw1 = document.querySelector('#PW1'),
pw2 = document.querySelector('#PW2');
//let isPasswordsMatch = false; //this line gets moved into the function as below.

pw1.addEventListener('input', checkPasswordEquality);
pw2.addEventListener('input', checkPasswordEquality);

function checkPasswordEquality() {
let isPasswordsMatch = false;

The second html object should also move that line into the function and this function needs a unique name.
I've called it checkPasswordEquality2() and it needs to be referenced that way in the 2 lines above it.

<script>
// Find input elements with the ID (PW3, PW4)
const pw3 = document.querySelector('#PW3'),
pw4 = document.querySelector('#PW4');
//let isPasswordsMatch = false; // variable called flag //move this line into the function
// Use for both event: input
pw3.addEventListener('input', checkPasswordEquality2);
pw4.addEventListener('input', checkPasswordEquality2);

function checkPasswordEquality2() {
let isPasswordsMatch = false; // variable called flag

2. Not critical to your problem but the "Name" on the Forgot password form for the password fields are PW1 and PW2, these should be changed to PW3 and PW4, but like i said this isn't the cause of your current issue.

3. The page is throwing another error, and I am surprised it doesn't cause a problem for your script, but on each of the password fields (all 4 of them) under the Validation tab, with the "Text Format" options Letter, Digits, Whitespace checked, it seems invalid reg expression code is being generated, that is out of scope for me as to why but if you uncheck those, the errors go away.

I hope that helps.

Cheers

Parker