How can I use javascript to enable a “create account” button once all fields have correct input?

Question

What I am trying to accomplish and have been unable to figure out after reading from different sources all day is, how do I get the disabled attribute from a button to go away once all of the fields have input? At this point in time it doesn't really matter what is in the fields as long as they have something. I have worked on a addEventListener which I tried doing a if(validateForm()) createBtn.removeAttribute('disabled');

 const form = document.getElementById('createForm') // Selecting all text elements const createBtn = document.getElementById('createBtn'); /* methods to validate user input */ // validate that all fields have input function validateForm() { // get values from input const studentIdValue = studentID.value.trim(); const emailValue = email.value.trim(); const usernameValue = username.value.trim(); const firstnameValue = firstname.value.trim(); const lastnameValue = lastname.value.trim(); const passwordValue = password.value.trim(); const password2Value = password_confirm.value.trim(); if(studentIdValue.== "" && emailValue;== "" && usernameValue.== "" && firstnameValue;== '' && lastnameValue !== '' && passwordValue !== '' && password2Value !== ''){ if(validateEmail(emailValue)) { createBtn.disabled = false; } } else { createBtn.disabled = true; } }

 <html> <head> <script src="https://github.com/claudewill1/Project/blob/main/validate.js" type="text/javascript"></script> </head> <body> <div class="container"> <div class="row justify-content-between p-1"> <div class="col-12 col-md-6 nopadding"> <form action="" id="createform" method="post"> <div class="form-group"> <h2 class="form-title">Create a New Account</h2> </div> <.-- form-group --> <.-- added ids to divs for input control to be able to access elements with script --> <div class="form-group"> <div class="input-group"> <input class="form-control rounded-0" placeholder="Student ID" autofocus type="text" name="studentid" id="studentId" value=""> </div> <!-- input-group --> </div> <!-- form-group --> <div class="form-group"> <div class="input-group" id="email_div"> <input class="form-control rounded-0" placeholder="Email" autofocus type="text" name="email" value=""> </div> <!-- input-group --> </div> <!-- form-group --> <div class="form-group"> <div class="input-group" id="username_div"> <input class="form-control rounded-0" placeholder="Username" autofocus type="text" name="username" value=""> </div> <!-- input-group --> </div> <!-- form-group --> <div class="form-group"> <div class="input-group" id="firstname_div"> <input class="form-control rounded-0" placeholder="First name" autofocus type="text" name="firstname" value=""> </div> <!-- input-group --> </div> <!-- form-group --> <div class="form-group"> <div class="input-group" id="lastname_div"> <input class="form-control rounded-0" placeholder="Last name" autofocus type="text" name="lastname" value=""> </div> <!-- input-group --> </div> <!-- form-group --> <div class="form-group"> <div class="input-group"> <input class="form-control rounded-0" placeholder="Password" autofocus type="password" name="phash1" id="pass1_div" value=""> <div class="input-group-append"> <button class="btn btn-gold" type="button" id="show1" onclick="toggleInputType1()"> SHOW </button> </div> </div> <!-- input-group --> </div> <!-- form-group --> <div class="form-group"> <div class="input-group"> <input class="form-control rounded-0" placeholder="Retype Password" autofocus type="password" name="phash2" id="pass2_div" value=""> <div class="input-group-append"> <button class="btn btn-gold" type="button" id="show2" onclick="toggleInputType2()"> SHOW </button> </div> </div> <!-- input-group --> </div> <!-- form-group --> <div class="form-group pt-3"> <div class="input-group"> <!-- changed id for create button to "createBtn" --> <button class="form-control rounded-0 btn-blue" type="button" id="createBtn" disabled onclick="btn_create()"> Create Account </button> </div> <!-- input-group --> <div class="input-group"> <button class="form-control rounded-0 btn-gold" type="button" id="submit" onclick="btn_home()"> Home </button> </div> <!-- input-group --> </div> <!-- form-group --> </form> </div> <!-- col-md --> <div class="col nopadding"> <img class="side" src="./img/hero-image.jpg" alt="Hero Image"> </div> <!-- col-6 --> </div> <!-- row --> </div> <!-- container --> </body> </html>

Can anyone point out what I might be doing wrong?

Also, please don't close my post as other have done in the past if I asked the question wrong, I am new for the most part to stackoverflow and I am posting based off the rules I see for posting. I made sure to only If needed I can edit this.

Answer 1

You have to invoke validateForm() function on every input field update. You can do something like this with onkeyup event:

<input class="form-control rounded-0" placeholder="Student ID" autofocus type="text" name="studentid" id="studentId" value="" onkeyup="validateForm()">

That way once all the validation criteria are met your button should become active. As an option you can definitely use event listeners outside of your html for each input field instead to trigger the validateForm() .

Answer 2

This works. I modified your validateForm() function a little and added another function that monitors the form for change.

function validateForm() {
    "use strict";

    //Check your HTML file. You'll need to add an id where there is none.
    const studentIdValue = document.getElementById("studentid").value.trim();
    const emailValue = document.getElementById("email").value.trim();
    const usernameValue = document.getElementById("username").value.trim();
    const firstnameValue = document.getElementById("firstname").value.trim();
    const lastnameValue = document.getElementById("lastname").value.trim();
    const passwordValue = document.getElementById("pass1_div").value.trim();
    const password2Value = document.getElementById("pass2_div").value.trim();

    if (studentIdValue !== "" && emailValue !== "" && usernameValue !== "" && firstnameValue !== "" && lastnameValue !== "" && passwordValue !== "" && password2Value !== "") {
        document.getElementById("create-btn").removeAttribute("disabled");
    }
}

//This function monitors the form for change.
function checkForm() {
    "use strict";

    const yourForm = document.getElementById("createform");

    yourForm.addEventListener("change", function () {
        validateForm();
    });
}

checkForm();

How can I use javascript to enable a “create account” button once all fields have correct input?

Question

2 answers

solution1
1 2021-01-15 04:41:03

solution2
1 ACCPTED 2021-01-15 06:09:22

How can I use javascript to enable a “create account” button once all fields have correct input?

Question

2 answers

solution1 1 2021-01-15 04:41:03

solution2 1 ACCPTED 2021-01-15 06:09:22

solution1
1 2021-01-15 04:41:03

solution2
1 ACCPTED 2021-01-15 06:09:22