Uhhhhh, What can I do next?

Joined
Aug 16, 2022
Messages
52
Reaction score
2
Hi Everybody,

With serious help from VBService, I've built a snippet to compare two user input variables.
If the two inputs are not equal, the snippet runs fine and simply changes the background
colour of the second input to "red" until the two values are equal.

However, the user can still submit the form even when those two values are not equal.
HA! I hadn't thought that far ahead!

So... if the vaues of PW1 and PW2 are not equal, the two questions I have are:
  • Can I interrupt the flow so that focus will be placed back on the input section for PW2 until the inputs for PW1 and PW2 are equal?
  • Do I have to wait until a user selects the <Submit> button, or can I place an interrupt as soon as the user moves focus to the next <Input> section?
HTML:
<!DOCTYPE HTML>
<html>
<head>
    <title>Uhhhhh, What can I do next?</title>
</head>
<body>
    <div class="container">

        <form method="post" id="registration" action="scripts/RegistrationHandler.php">
            <div class="row">
                <div class="col">
                    <div class="input-group">
                        <label for="PW!">Enter Password:</label>
                        <input type="password" class="form-control" placeholder="Enter Your Password" id="PW1" name="PW1" title="Enter the password you will use to sign-in" required="required">
                    </div>
                </div>
                <div class="col">
                    <div class="input-group">
                        <label for "PW2">Re-Enter Password:</label>
                    <input type="password" class="form-control" placeholder="Enter Your Password Again" id="PW2" name="PW2" title="re-Enter the password you will use to sign-in"  required="required"><br>
                    </div>
                </div>
            </div>
            <!--Insert a script to evaluate "what to do" if pWord1 is equal/unequal to pWord2 -->
            <script>
                const pw1 = document.querySelector('#PW1'),
                           pw2 = document.querySelector('#PW2');
                  let isPasswordsMatch = false; // variable called flag
                    // Use for both event: input
                     pw1.addEventListener('input', checkPasswordEquality);
                     pw2.addEventListener('input', checkPasswordEquality);

                     function checkPasswordEquality() {
                    // Remove leading and trailing whitespace from the password values
                    const password1 = pw1.value.trim();
                    const password2 = pw2.value.trim();
                         if (password1.length && password2.length) {
                          if (password1 === password2) {
                            // Passwords are the same
                            pw2.style.backgroundColor = '#FFFF00';
                            isPasswordsMatch = true;
                          } else {
                               // Passwords are different
                            pw2.style.backgroundColor = '#FF0000';
                            isPasswordsMatch = false;
                          }
                         } else {
                           pw2.style.backgroundColor = '';
                          pw2.value = '';
                          isPasswordsMatch = false;
                        }
                      }
            </script>
            <div>
                <div class="col">
                    <div class="input-group">
                        <label for="fName">Name:</label>
                        <input type="text" id="fName" name="fName" placeholder ="enter your First Name"><br>
                    </div>
                </div>
            </div>
            <div>
                <input type="submit">
            </div>
        </form>
    </div>
</body>
</html>
 
Joined
Jul 4, 2023
Messages
400
Reaction score
44
Try like this ... ;)

[ full working example on-line ]
1. Add to button Submit attribute disabled
HTML:
<input type="submit" disabled>
2. Add this simply javascript code
JavaScript:
if (! isPasswordsMatch)
  document.querySelector('form#registration [type="submit"]').setAttribute('disabled', null);
else
  document.querySelector('form#registration [type="submit"]').removeAttribute('disabled');
 
Joined
Sep 4, 2022
Messages
129
Reaction score
16
while checking the length, you are overweighting your code.
the '===' check if Types and Values are equal.
the 'value' of a var have the 'length' already in.
 
Joined
Jul 4, 2023
Messages
400
Reaction score
44
In JavaScript, the length property can be treated as a boolean condition, evaluating to false if its value is 0, and true for any other non-zero value.
JavaScript:
a = '';
b = '';

if (a && b)
// or
if (a.length && b.length)

In JavaScript, both expressions if (a && b) and if (a.length && b.length) are likely to have comparable performance, with any potential difference being negligible. However, when comparing these expressions:
  1. if (a && b): This condition checks if both a and b are truthly, meaning they are not null, undefined, 0, false, NaN, or an empty string. If both a and b are empty strings, the condition will be satisfied.
  2. if (a.length && b.length): This condition checks if both variables a and b are non-empty strings (i.e., they have a length greater than 0). If you want the condition to be satisfied only when both variables are non-empty strings, this expression is more precise.
The choice between these two expressions depends on the intention of the condition and whether empty strings should be considered as satisfying the condition or not. If empty strings are acceptable, use if (a && b). If you want to require non-empty strings, use if (a.length && b.length).
 
Last edited:
Joined
Aug 16, 2022
Messages
52
Reaction score
2

jPaulB, if you would take the time to study https://www.w3schools.com you won't need to keep coming here making poor VB program for you.

Sorry you feel that way BigDady, but I do object to your tone.
I spend a lot of time reading through the W3 Tutotials, courses offered by Udemy, and the various PHP and JavaScript user manuals.
The questions I pose in this forum have always asked for help with the "thinking process" that I ought to build into any individual snippet I try to include. Is it smart to do it "this way" or "that way".
I'm not asking poor VBService to simply "do" my work for me. He has responded to several of my inquiries with clear examples as well as alternate approaches to resolve questions. I actually use his examples to find and study the procedures through W3 Tutorials and the user manuals. As a last resort, there is always ChatGPT.
What is all of this to you, anyway?
 
Joined
Aug 16, 2022
Messages
52
Reaction score
2
Try like this ... ;)

[ full working example on-line ]
1. Add to button Submit attribute disabled
HTML:
<input type="submit" disabled>
2. Add this simply javascript code
JavaScript:
if (! isPasswordsMatch)
  document.querySelector('form#registration [type="submit"]').setAttribute('disabled', null);
else
  document.querySelector('form#registration [type="submit"]').removeAttribute('disabled');
Once again, thank you very much VBService.
I had no idea that I could do that.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,828
Messages
2,569,736
Members
45,518
Latest member
vlonesshirt

Latest Threads

Top