How to make that button will be disabled until all inputs are filled? | JavaScript Mastery - Programming & Coding Community | Page 1

unkempt cave Oct 28, 2023, 12:34 PM

#

check for the conditions and create a function to handle the case (perhaps add a class to the button and toggle the class to change style and remove the listener if conditions are matched)

stuck gust Oct 28, 2023, 2:27 PM

#

im more looking for source code

#

🥺

#

since mine dont work

#

 document.addEventListener("DOMContentLoaded", function () {
        const form = document.getElementById("registrationForm");
        const usernameInput = document.getElementById("username");
        const emailInput = document.getElementById("email");
        const passwordInput = document.getElementById("password");
        const button = document.getElementById("registerconfirm");
    
        // Create a function to continuously check and update the button's state
        function updateButtonState() {
          const isUsernameValid = usernameInput.value.trim() !== "";
          const isEmailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailInput.value);
          const isPasswordValid = passwordInput.value.length >= 6;
    
          if (isUsernameValid && isEmailValid && isPasswordValid) {
            button.removeAttribute("disabled");
            button.style.cursor = "pointer";
          } else {
            button.setAttribute("disabled", "disabled");
            button.style.cursor = "not-allowed";
          }
        }

patent mist Oct 28, 2023, 6:01 PM

#

stuck gust ```js document.addEventListener("DOMContentLoaded", function () { const...

Would you mind sharing the specific issues you are having with this code?

stuck gust Oct 28, 2023, 6:02 PM

#

the button keep being disabled even tho i fill everything right

orchid portal Oct 28, 2023, 6:12 PM

#

stuck gust ```js document.addEventListener("DOMContentLoaded", function () { const...

The updateButtonState() is never called and your comment seems to imply that you expect it to operate reactively, which is not going to happen. This function actually never runs at all.

#

You must define updateButtonState() outside of the event handler and create another event listener which runs this code when the relevant input values are changed.

stuck gust Oct 28, 2023, 6:22 PM

#

orchid portal You must define updateButtonState() outside of the event handler and create anot...

like this?


function updateButtonState() {
    const isUsernameValid = usernameInput.value.trim() !== "";
    const isEmailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailInput.value);
    const isPasswordValid = passwordInput.value.length >= 6;

    if (isUsernameValid && isEmailValid && isPasswordValid) {
        button.removeAttribute("disabled");
        button.style.cursor = "pointer";
    } else {
        button.setAttribute("disabled", "disabled");
        button.style.cursor = "not-allowed";
    }
}

document.addEventListener("DOMContentLoaded", function () {
    const form = document.getElementById("registrationForm");
    const usernameInput = document.getElementById("username");
    const emailInput = document.getElementById("email");
    const passwordInput = document.getElementById("password");
    const button = document.getElementById("registerconfirm");

    
    updateButtonState();

   
    usernameInput.addEventListener("input", updateButtonState);
    emailInput.addEventListener("input", updateButtonState);
    passwordInput.addEventListener("input", updateButtonState);
});

#

cuz its still not working -_-

unkempt cave Oct 28, 2023, 6:30 PM

#

stuck gust like this? ```js function updateButtonState() { const isUsernameValid = use...

~~I assume all your inputsmight be undefined, but you should have error messages in that case!
However you can try the optional chaining, so it would not throw on load

usernameInput?.value.trim() !== "";~~

orchid portal Oct 28, 2023, 6:33 PM

#

stuck gust like this? ```js function updateButtonState() { const isUsernameValid = use...

This code still has a problem. You run getElementById() too soon. Run it inside the updateButtonState().

stuck gust Oct 28, 2023, 6:35 PM

#

orchid portal This code still has a problem. You run getElementById() too soon. Run it inside ...

function updateButtonState() {
        const isUsernameValid = usernameInput?.value.trim() !== "";
        const isEmailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailInput?.value);
        const isPasswordValid = passwordInput?.value.length >= 6;

            const form = document.getElementById("registrationForm");
            const usernameInput = document.getElementById("username");
            const emailInput = document.getElementById("email");
            const passwordInput = document.getElementById("password");
            const button = document.getElementById("registerconfirm");
        if (isUsernameValid && isEmailValid && isPasswordValid) {
            button.removeAttribute("disabled");
            button.style.cursor = "pointer";
        } else {
            button.setAttribute("disabled", "disabled");
            button.style.cursor = "not-allowed";
        }
    }
    
    
    
        // Attach input event listeners to trigger the function when input values change
        usernameInput.addEventListener("input", updateButtonState);
        emailInput.addEventListener("input", updateButtonState);
        passwordInput.addEventListener("input", updateButtonState);
    
        // Initial call to updateButtonState when the page is fully loaded
        window.addEventListener("load", updateButtonState);

    ```
like that? 😭

orchid portal Oct 28, 2023, 6:36 PM

#

stuck gust ```js function updateButtonState() { const isUsernameValid = usernameInp...

Put the getElementById() statements higher. You are using the values before they are defined.

orchid portal Oct 28, 2023, 6:38 PM

#

stuck gust ```js function updateButtonState() { const isUsernameValid = usernameInp...

Why did you add code to run this function when the window loads? That is too soon.

stuck gust Oct 28, 2023, 6:41 PM

#

const form = document.getElementById("registrationForm");
    const usernameInput = document.getElementById("username");
    const emailInput = document.getElementById("email");
    const passwordInput = document.getElementById("password");
    const button = document.getElementById("registerconfirm");
    function updateButtonState() {
        
        const isUsernameValid = usernameInput?.value.trim() !== "";
        const isEmailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailInput?.value);
        const isPasswordValid = passwordInput?.value.length >= 6;

            
        if (isUsernameValid && isEmailValid && isPasswordValid) {
            button.removeAttribute("disabled");
            button.style.cursor = "pointer";
        } else {
            button.setAttribute("disabled", "disabled");
            button.style.cursor = "not-allowed";
        }
    }
    
    
    
        // Attach input event listeners to trigger the function when input values change
        usernameInput.addEventListener("input", updateButtonState);
        emailInput.addEventListener("input", updateButtonState);
        passwordInput.addEventListener("input", updateButtonState);
    
        // Initial call to updateButtonState when the page is fully loaded
        window.addEventListener("load", updateButtonState);

#

putted it higher

stuck gust Oct 28, 2023, 6:41 PM

#

orchid portal Why did you add code to run this function when the window loads? That is too soo...

how im supposed to do it

orchid portal Oct 28, 2023, 6:42 PM

#

stuck gust how im supposed to do it

Remove the last line of code. The other event listeners are calling the function at the right time. That last one calls it when the page loads. That is before the user has had time to do anything.

stuck gust Oct 28, 2023, 6:43 PM

#

    const form = document.getElementById("registrationForm");
const usernameInput = document.getElementById("username");
const emailInput = document.getElementById("email");
const passwordInput = document.getElementById("password");
const button = document.getElementById("registerconfirm");

function updateButtonState() {
    const isUsernameValid = usernameInput?.value.trim() !== "";
    const isEmailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailInput?.value);
    const isPasswordValid = passwordInput?.value.length >= 6;

    if (isUsernameValid && isEmailValid && isPasswordValid) {
        button.removeAttribute("disabled");
        button.style.cursor = "pointer";
    } else {
        button.setAttribute("disabled", "disabled");
        button.style.cursor = "not-allowed";
    }
}

// Attach input event listeners to trigger the function when input values change
usernameInput.addEventListener("input", updateButtonState);
emailInput.addEventListener("input", updateButtonState);
passwordInput.addEventListener("input", updateButtonState);

#

removed, still not working

orchid portal Oct 28, 2023, 6:43 PM

#

stuck gust ```js const form = document.getElementById("registrationForm"); const userna...

You moved them too high. Keep them inside the function but as the first items.

stuck gust Oct 28, 2023, 6:44 PM

#

function updateButtonState() {
const form = document.getElementById("registrationForm");
const usernameInput = document.getElementById("username");
const emailInput = document.getElementById("email");
const passwordInput = document.getElementById("password");
const button = document.getElementById("registerconfirm");
    const isUsernameValid = usernameInput?.value.trim() !== "";
    const isEmailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailInput?.value);
    const isPasswordValid = passwordInput?.value.length >= 6;

    if (isUsernameValid && isEmailValid && isPasswordValid) {
        button.removeAttribute("disabled");
        button.style.cursor = "pointer";
    } else {
        button.setAttribute("disabled", "disabled");
        button.style.cursor = "not-allowed";
    }
}

// Attach input event listeners to trigger the function when input values change
usernameInput.addEventListener("input", updateButtonState);
emailInput.addEventListener("input", updateButtonState);
passwordInput.addEventListener("input", updateButtonState);

#

still not working 👍

orchid portal Oct 28, 2023, 6:44 PM

#

stuck gust ```js function updateButtonState() { const form = document.getElementById("regis...

OK. This looks better. Put some console logs to see if it is correctly detecting when the input is valid.

stuck gust Oct 28, 2023, 6:45 PM

#

function updateButtonState() {
const form = document.getElementById("registrationForm");
const usernameInput = document.getElementById("username");
const emailInput = document.getElementById("email");
const passwordInput = document.getElementById("password");
const button = document.getElementById("registerconfirm");
    const isUsernameValid = usernameInput?.value.trim() !== "";
    const isEmailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailInput?.value);
    const isPasswordValid = passwordInput?.value.length >= 6;

console.log(usernameInput)

    if (isUsernameValid && isEmailValid && isPasswordValid) {
        button.removeAttribute("disabled");
        button.style.cursor = "pointer";
    } else {
        button.setAttribute("disabled", "disabled");
        button.style.cursor = "not-allowed";
    }
}

// Attach input event listeners to trigger the function when input values change
usernameInput.addEventListener("input", updateButtonState);
emailInput.addEventListener("input", updateButtonState);
passwordInput.addEventListener("input", updateButtonState);

#

orchid portal Oct 28, 2023, 6:46 PM

#

stuck gust ```js function updateButtonState() { const form = document.getElementById("regis...

If you have the script tag in the head, use defer.

stuck gust Oct 28, 2023, 6:47 PM

#

done

orchid portal Oct 28, 2023, 6:48 PM

#

stuck gust ```js function updateButtonState() { const form = document.getElementById("regis...

There is another problem. You have a single function checking the validity of all inputs. The problem is that some inputs will have data before others. You must check every input to see if it has a value before you do this other analysis for validity.

#

I just realized that there is another issue. You were right to put those getElementById() statements before the function. That is needed to get the event listeners to work. Move them back above the function definition.

stuck gust Oct 28, 2023, 6:53 PM

#

orchid portal There is another problem. You have a single function checking the validity of al...

you mean this part?

  if (isUsernameValid && isEmailValid && isPasswordValid) {
        button.removeAttribute("disabled");
        button.style.cursor = "pointer";

orchid portal Oct 28, 2023, 6:55 PM

#

stuck gust you mean this part? ```js if (isUsernameValid && isEmailValid && isPasswordVa...

Your console log comes before that. Move it into that block.

stuck gust Oct 28, 2023, 6:56 PM

#

function updateButtonState() {
    const form = document.getElementById("registrationForm");
    const usernameInput = document.getElementById("username");
    const emailInput = document.getElementById("email");
    const passwordInput = document.getElementById("password");
    const button = document.getElementById("registerconfirm");

    const isUsernameValid = !!usernameInput.value && usernameInput.value.trim() !== "";
    const isEmailValid = !!emailInput.value && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailInput.value);
    const isPasswordValid = !!passwordInput.value && passwordInput.value.length >= 6;

    console.log("Username valid:", isUsernameValid);
    console.log("Email valid:", isEmailValid);
    console.log("Password valid:", isPasswordValid);

    if (isUsernameValid && isEmailValid && isPasswordValid) {
        button.removeAttribute("disabled");
        button.style cursor = "pointer";
    } else {
        button.setAttribute("disabled", "disabled");
        button.style.cursor = "not-allowed";
    }
}

// Attach input event listeners to trigger the function when input values change
const usernameInput = document.getElementById("username");
const emailInput = document.getElementById("email");
const passwordInput = document.getElementById("password");

usernameInput.addEventListener("input", updateButtonState);
emailInput.addEventListener("input", updateButtonState);
passwordInput.addEventListener("input", updateButtonState);

orchid portal Oct 28, 2023, 6:57 PM

#

stuck gust ```js function updateButtonState() { const form = document.getElementById("r...

All of your console logs are being done without the validity check. Put them inside the if block. Also, I think you missed my comment where I said your original decision to move the getElementById() code before the function was actually correct.

stuck gust Oct 28, 2023, 6:57 PM

#

function updateButtonState() {
    const form = document.getElementById("registrationForm");
    const usernameInput = document.getElementById("username");
    const emailInput = document.getElementById("email");
    const passwordInput = document.getElementById("password");
    const button = document.getElementById("registerconfirm");

    const isUsernameValid = !!usernameInput.value && usernameInput.value.trim() !== "";
    const isEmailValid = !!emailInput.value && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailInput.value);
    const isPasswordValid = !!passwordInput.value && passwordInput.value.length >= 6;

    if (isUsernameValid && isEmailValid && isPasswordValid) {
        console.log("Username valid:", isUsernameValid);
        console.log("Email valid:", isEmailValid);
        console.log("Password valid:", isPasswordValid);

        button.removeAttribute("disabled");
        button.style.cursor = "pointer";
    } else {
        button.setAttribute("disabled", "disabled");
        button.style.cursor = "not-allowed";
    }
}

// Attach input event listeners to trigger the function when input values change
const usernameInput = document.getElementById("username");
const emailInput = document.getElementById("email");
const passwordInput = document.getElementById("password");

usernameInput.addEventListener("input", updateButtonState);
emailInput.addEventListener("input", updateButtonState);
passwordInput.addEventListener("input", updateButtonState);

#

oh yea

#

sec

#

nvm its there lol

#

orchid portal Oct 28, 2023, 6:59 PM

#

stuck gust

I think you missed my comment twice now. Move the getElementById() code before the function. I was mistaken when I previously said move it into the function.

stuck gust Oct 28, 2023, 7:00 PM

#

💀

orchid portal Oct 28, 2023, 7:00 PM

#

Disregard that last advice. I see that you redefined outside the function. That also works, but is less efficient.

stuck gust Oct 28, 2023, 7:00 PM

#

huh

#

#

ight lemme keep them in function i guess

orchid portal Oct 28, 2023, 7:01 PM

#

stuck gust

That looks like you have redefinition of constants.

orchid portal Oct 28, 2023, 7:02 PM

#

stuck gust

Define them only once but before the function.

stuck gust Oct 28, 2023, 7:02 PM

#

if i put then in function it will redifition but only for checking inputs?

orchid portal Oct 28, 2023, 7:02 PM

#

stuck gust if i put then in function it will redifition but only for checking inputs?

I did not understand that question.

stuck gust Oct 28, 2023, 7:03 PM

#

nvm it makes no sense

#

sec

orchid portal Oct 28, 2023, 7:03 PM

#

stuck gust

It looks like you are defining the same constants before and after the function. Delete the ones after. Lines 320-322.

stuck gust Oct 28, 2023, 7:03 PM

#

oh yea

#

so i put it in function or before

orchid portal Oct 28, 2023, 7:04 PM

#

stuck gust so i put it in function or before

Before. Just delete the extra that are after. Do not change the ones before.

stuck gust Oct 28, 2023, 7:04 PM

#

ight

  const form = document.getElementById("registrationForm");
        const usernameInput = document.getElementById("username");
        const emailInput = document.getElementById("email");
        const passwordInput = document.getElementById("password");
        const button = document.getElementById("registerconfirm");
    function updateButtonState() {
        

        const isUsernameValid = !!usernameInput.value && usernameInput.value.trim() !== "";
        const isEmailValid = !!emailInput.value && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailInput.value);
        const isPasswordValid = !!passwordInput.value && passwordInput.value.length >= 6;
    
        if (isUsernameValid && isEmailValid && isPasswordValid) {
            console.log("Username valid:", isUsernameValid);
            console.log("Email valid:", isEmailValid);
            console.log("Password valid:", isPasswordValid);
    
            button.removeAttribute("disabled");
            button.style.cursor = "pointer";
        } else {
            button.setAttribute("disabled", "disabled");
            button.style.cursor = "not-allowed";
        }
    }
    
    // Attach input event listeners to trigger the function when input values change

    
    usernameInput.addEventListener("input", updateButtonState);
    emailInput.addEventListener("input", updateButtonState);
    passwordInput.addEventListener("input", updateButtonState);

orchid portal Oct 28, 2023, 7:05 PM

#

stuck gust ight ```js const form = document.getElementById("registrationForm"); c...

OK. What happens when you run this?

stuck gust Oct 28, 2023, 7:05 PM

#

#

only first one is for this function

#

dont mind bottom two errors, everything works fine 👍

orchid portal Oct 28, 2023, 7:06 PM

#

stuck gust

Is the script tag in the head without a defer attribute?

stuck gust Oct 28, 2023, 7:06 PM

#

#

btw i have html in js

#

i mean

orchid portal Oct 28, 2023, 7:07 PM

#

stuck gust

Line 323 is this?

 usernameInput.addEventListener("input", updateButtonState);

stuck gust Oct 28, 2023, 7:07 PM

#

 button.addEventListener('click', function() {
        modal.style.display = 'block';
        
        // Customize the modal content here
    
        
        modalContent.innerHTML = `
        <form method="post" action="connect.php" novalidate id="registrationForm">

    
        <p style="text-align: center;"><b>Rejestracja</b></p><br>

        <p style="text-align: left;"><strong>Nazwa Użytkownika</strong></p>

        <input id="username" style="width: 80%; height: 8%; margin-right: 230px;" autocomplete="off" name="name"><br><br>

        <p style="text-align: left;"><strong>Email</strong></p>

        <input id="email" type="email" style="width: 80%; height: 8%; margin-right: 230px;" autocomplete="off" name="email"><br><br>

        <p style="text-align: left;"><strong>Hasło</strong></p>

        <input id="password" type="password" style="width: 80%; height: 8%; margin-right: 230px;" autocomplete="off" name="password">

        <p style="text-align: left; font-size: 14px" id="password-validation">Hasło musi zawierać minimum 6 znaków.</p>

        <button class="transbutton" id="registerconfirm" disabled style="cursor: not-allowed;"><b>Zarejestruj się</b></button>


        

        <p style="position: absolute; top: 94%; left: 10%">Posiadasz już konto?<a href=""> <b style="font-size:18px; color:#b3b3b3  ">Zaloguj się</b></a></p>
  </form>
        
        `;    
    });

stuck gust Oct 28, 2023, 7:07 PM

#

orchid portal Line 323 is this? ```js usernameInput.addEventListener("input", updateButtonSta...

ye

orchid portal Oct 28, 2023, 7:08 PM

#

stuck gust ```js button.addEventListener('click', function() { modal.style.display...

That could be an issue. This doesn't get added to the DOM until that button is pressed. The addEventListener() code that is failing has to be put inside of this event handler.

stuck gust Oct 28, 2023, 7:08 PM

#

how can i fix that

#

i must put it into html?

orchid portal Oct 28, 2023, 7:09 PM

#

stuck gust i must put it into html?

Try moving all the code that we worked on earlier into this event handler.

stuck gust Oct 28, 2023, 7:11 PM

#

lmao

#

it works now 😭

#

tysm chooking love u

#How to make that button will be disabled until all inputs are filled?