How to enable/disable a button dynamically with JavaScript, based on conditions with textfields

Question

I have the following jsp page, consisting of 2 text fields, 2 password fields, 1 email field and 1 file-uploader, followed by a disabled button:

<html>
    <head>
        <title>Registration Page</title> 
    </head>

    <body>
        <h3>Registration</h3>
        <form action="Myservlet" method="POST" enctype="multipart/form-data">

            <p>Name <input type="text" name="name" id="name"></p>
            <p>Lastname <input type="text" name="lastname" id="lastname"></p>
            <p>Email <input type="email" name="email" id="email"></p>
            <p>Password <input type="password" name="password" id="password"></p>
            <p>Confirm password <input type="password" name="confirmpassword" id="confirmpassword"></p>
            <p>Photo <input type="file" name="photo"></p>

            <p><input type="submit" value="register" id="register" disabled></p>        
        </form>
        <script src="RegScript.js"></script>
    </body>
</html>

My purpose is to enable and disable the button at run time using pure JavaScript, based on 2 conditions:

All the text fields, except the file-uploader, must all be filled in;
The password fields must match.

So I wrote the following JavaScript code:

RegScript.js

name = document.getElementById("name");
lastname = document.getElementById("lastname ");
email = document.getElementById("email");
password = document.getElementById("password");
confirmpassword = document.getElementById("confirmpassword");
register = document.getElementById("register");

//password matching & text fields checking


confirmpassword.addEventListener('input', () =>{
    if((name.value.length > 0)&&(lastname.value.length > 0)&&(email.value.length > 0)&&(confirmpassword.value === password.value)){
       register.disabled = false;
   }
   else{
       register.disabled = true;
   }
});

password.addEventListener('input', () =>{
    if((name.value.length > 0)&&(lastname.value.length > 0)&&(email.value.length > 0)&&(confirmpassword.value === password.value)){
       register.disabled = false;
   }
   else{
       register.disabled = true;
   }
});

The following script seems to work partially, but it has some errors: When I fill in all the text fields in order as they appear, in the moment that the passwords match the button is enabled, as well as if I delete the password it's disabled again, but if instead I delete one of the other three text fields (name, lastname or email) the button remains enabled, when it should not. What can I do to simplify the code (I'm not satisfied with the way I wrote my code, since it's redundant) and to solve to this issue?

Abdellah Hariti · Accepted Answer · 2022-10-06 14:41:50Z

You can DRY the validation logic in a validate function that runs whenever inputs change, which is set up using addEventListener on each of them.

This unifies the logic and makes it easy to extend later, for example you might check the emails .validity.valid property to see if it's an actual email.

This is a working snippet:

let name = document.getElementById("name");
let lastname = document.getElementById("lastname");
let email = document.getElementById("email");
let password = document.getElementById("password");
let confirmpassword = document.getElementById("confirmpassword");
let register = document.getElementById("register");

[name, lastname, email, password, confirmpassword].forEach(input => {
  input.addEventListener("input", validate)
})

const hasLength = input => input.value.trim().length > 0;

function validate() {
  let isValid =
    hasLength(name) &&
    hasLength(lastname) &&
    hasLength(email) &&
    hasLength(password) &&
    password.value == confirmpassword.value;
    
    console.log(isValid)
    register.disabled = !isValid;
    
}

<html>

<head>
  <title>Registration Page</title>
</head>

<body>
  <h3>Registration</h3>
  <form action="Myservlet" method="POST" enctype="multipart/form-data">

    <p>Name <input type="text" name="name" id="name"></p>
    <p>Lastname <input type="text" name="lastname" id="lastname"></p>
    <p>Email <input type="email" name="email" id="email"></p>
    <p>Password <input type="password" name="password" id="password"></p>
    <p>Confirm password <input type="password" name="confirmpassword" id="confirmpassword"></p>
    <p>Photo <input type="file" name="photo"></p>

    <p><input type="submit" value="register" id="register" disabled></p>
  </form>
  <script src="RegScript.js"></script>
</body>

</html>

Great solution, thank you! I didn't know you could add an EventListener so compactly to all the components. Now it works well and does its purpose.

Collectives™ on Stack Overflow

How to enable/disable a button dynamically with JavaScript, based on conditions with textfields

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related