How to interrupt the <Input type="submit> button in a form

jPaulB

jPaulB

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

I recently asked how to verify whether the two input boxes' inputs matched. This was in the "Password Reveal" discussion. Thanks to VBService, I was able to insert some javascript that does the job perfectly. VBService is an amazing resource. I see his responses to many inquiries, and he is always spot on!

However, I forgot to ask how to interrupt the Submit button if the two inputs do NOT match.
Screenshot 2025-02-28 095946.jpg

How would I approach this and perhaps add a tool tip that states the passwords do not match?
 
F

FResher

Joined
Sep 4, 2022
Messages
155
Reaction score
16
by submit button , you can add 'events' belonging to JS.

By Js , you have lot of tools and methods : https://www.w3schools.com/jsref/jsref_reference.asp
It's always like "on....="function to call";"

onclick and affiliates :
onsubmit : https://www.w3schools.com/jsref/event_onsubmit.asp


to check your 2 passwords , one "if statement" is as simple as possible :

JavaScript: 
// checking without vars as containers : no "let"

if( Document.getElementById("A").value == Document.getElementById("B").value ){

    ;

}
 
VBService

VBService

Joined
Jul 4, 2023
Messages
583
Reaction score
78
For the examples provided by @Oneechan1013 and @FResher, I suggest adding trim().
JavaScript: 
const forgot_password__form = document.querySelector('#forgot-password')
forgot_password__form.addEventListener('submit', checkPasswordsMatching);

function checkPasswordsMatching(e) {
  const password = e.target.querySelector('#password').value.trim(),
        password_confirm = e.target.querySelector('#password-confirm').value.trim(),
        match_error__message = e.target.querySelector('.match-error');

  if (password === password_confirm && password.length > 0) {
    match_error__message.classList.add('hide-match-error');
  } else {
    e.preventDefault();
    match_error__message.classList.remove('hide-match-error');
  }
}

HTML: 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Password Match Validation</title>

    <style>
      form#forgot-password {
        display: flex;
        flex-direction: column;
        width: 300px;
        border: 2px solid black;
        border-radius: .5rem;
        background-color: mediumturquoise;
        font: 700 .95rem/1 system-ui, monospace, sans-serif;
      }
      form#forgot-password * {
        display: block;
        box-sizing: border-box;
      }
      form#forgot-password .title {
        color: white;
        background-color: cornflowerblue;
        padding: .7rem;
        margin-bottom: 1.5rem;
      }
      form#forgot-password input {
        font-size: 1rem;
        border: 2px solid black;
        border-radius: .25rem;
        margin: 0 auto;
        width: 85%;
        padding-left: .5rem;
      }
      form#forgot-password input + input {
        margin-top: .75rem;
      }
      form#forgot-password input::placeholder {
        font-size: 70%;
      }
      form#forgot-password .match-error {
        color: orangered;
        font-size: .9rem;
        margin: .75rem auto;
      }
      form#forgot-password [type="submit"] {
        border-radius: .25rem;
        padding: .25rem 1rem;
        cursor: pointer;
        width: 85%;
        margin: 0 auto .5rem;
      }
      form#forgot-password .hide-match-error {
        visibility: hidden;
      }
    </style>
  </head>
  <body>

    <form id="forgot-password">
      <div class="title">Forgot Password?</div>
      <input type="password" id="password"
             placeholder="Enter NEW Password" required1>
      <input type="password" id="password-confirm"
             placeholder="Confirm NEW Password" required1>
      <div class="match-error hide-match-error">Passwords do not match!</div>
      <button type="submit">Submit</button>
    </form>

    <script>
      const forgot_password__form = document.querySelector('#forgot-password')
      forgot_password__form.addEventListener('submit', checkPasswordsMatching);

      function checkPasswordsMatching(e) {
        const password = e.target.querySelector('#password').value.trim(),
              password_confirm = e.target.querySelector('#password-confirm').value.trim(),
              match_error__message = e.target.querySelector('.match-error');

        if (password === password_confirm && password.length > 0) {
          match_error__message.classList.add('hide-match-error');
        } else {
          e.preventDefault();
          match_error__message.classList.remove('hide-match-error');
        }
      }
    </script>
  </body>
</html>
 
Last edited:
VBService

VBService

Joined
Jul 4, 2023
Messages
583
Reaction score
78
Sorry, but there is a small mistake in the code above.
VBService said:
HTML: 
<input type="password" id="password" placeholder="Enter NEW Password" required1>
<input type="password" id="password-confirm" placeholder="Confirm NEW Password" required1>
Click to expand...
Replace required1 with required in both input fields, as this appears to be a typo. If you prefer to remove the required attribute entirely, you can do that as well.. 😇



BTW,
when using the keyup event.
HTML: 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Password Match Validation</title>

    <style>
      form#forgot-password {
        display: flex;
        flex-direction: column;
        width: 300px;
        border: 2px solid black;
        border-radius: .5rem;
        background-color: mediumturquoise;
        font: 700 .95rem/1 system-ui, monospace, sans-serif;
      }
      form#forgot-password * {
        display: block;
        box-sizing: border-box;
      }
      form#forgot-password .title {
        color: white;
        background-color: cornflowerblue;
        padding: .7rem;
        margin-bottom: 1.5rem;
      }
      form#forgot-password input {
        font-size: 1rem;
        border: 2px solid black;
        border-radius: .25rem;
        margin: 0 auto;
        width: 85%;
        padding-left: .5rem;
      }
      form#forgot-password input + input {
        margin-top: .75rem;
      }
      form#forgot-password input::placeholder {
        font-size: 70%;
      }
      form#forgot-password .match-error {
        color: orangered;
        font-size: .9rem;
        margin: .75rem auto;
      }
      form#forgot-password [type="submit"] {
        border-radius: .25rem;
        padding: .25rem 1rem;
        cursor: pointer;
        width: 85%;
        margin: 0 auto .5rem;
      }
      form#forgot-password [type="submit"][disabled] {
        cursor: default;
      }
      form#forgot-password .hide-match-error {
        visibility: hidden;
      }
    </style>
  </head>
  <body>

    <form id="forgot-password">
      <div class="title">Forgot Password?</div>
      <input type="password" id="password"
             placeholder="Enter NEW Password">
      <input type="password" id="password-confirm"
             placeholder="Confirm NEW Password">
      <div class="match-error hide-match-error">Passwords do not match!</div>
      <button type="submit" disabled>Submit</button>
    </form>

    <script>
      const forgot_password__form = document.querySelector('#forgot-password')
      forgot_password__form.addEventListener('keydown', blockingProhibitedCharacters);
      forgot_password__form.addEventListener('keyup', checkPasswordsMatching);

      function blockingProhibitedCharacters(e) {
        if (!e.target.matches('[type="password"]')) return;
        if (e.code === 'Space') {
          e.preventDefault();
          e.target.dataset.ignoreKeyup = "true";
        } else {
          delete e.target.dataset.ignoreKeyup;  
        }
      }

      function checkPasswordsMatching(e) {
        if (!e.target.matches('[type="password"]')) return;
        if (e.target.dataset.ignoreKeyup === "true") return;

        const password = e.currentTarget.querySelector('#password').value,
              password_confirm = e.currentTarget.querySelector('#password-confirm').value,
              match_error__message = e.currentTarget.querySelector('.match-error'),
              submit__button = e.currentTarget.querySelector('[type="submit"]');

        if (password === password_confirm && password.length > 0) {
          match_error__message.classList.add('hide-match-error');
          submit__button.disabled = false;
        } else if (password.length === 0) {
          match_error__message.classList.add('hide-match-error');
          submit__button.disabled = true;
        } else {
          match_error__message.classList.remove('hide-match-error');
          submit__button.disabled = true;
        }
      }
    </script>
  </body>
</html>
 
VBService

VBService

Joined
Jul 4, 2023
Messages
583
Reaction score
78
Final Note:
Validating values from an <input> field (such as password comparison) in a web browser using JavaScript is merely a cosmetic measure intended to enhance the user experience when filling out a form. The actual data validation should be performed in the backend code of the website.

This is crucial because client-side validation can be easily bypassed or manipulated by users, for example, by disabling JavaScript or modifying the request before it reaches the server. Relying solely on frontend validation exposes the application to security risks such as SQL injection, cross-site scripting (XSS), and unauthorized access. Proper backend validation ensures data integrity, security, and protection against malicious attacks.
 

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

Similar Threads

Move a Form action="ThatPage.php" to an <input type="??" > inline 1
HCaptcha - How to stop page from refreshing on submit if captcha is not checked/validated 1
Uhhhhh, What can I do next? 6
<Button ...> display is fine, except for two things 1
How to position the *tooltip* comment on these buttons? 9
How to discover a CSS Selector name? 8
How to store data from a sign up form on a website into an sql databse 1
Hello I am learning how to code and I tried making a calculator with HTML and js with some CSS I am stuck at thing, Like the screen value is 0

Members online

No members online now.
Total: 52 (members: 0, guests: 52)
Robots: 101

Forum statistics

Threads
474,300
Messages
2,571,537
Members
48,327
Latest member
GWEDalene9

Latest Threads

Top