一旦所有字段都输入正确，如何使用 javascript 启用“创建帐户”按钮？答案

【问题标题】：How can I use javascript to enable a "create account" button once all fields have correct input?一旦所有字段都输入正确，如何使用 javascript 启用“创建帐户”按钮？
【发布时间】：2021-01-15 02:17:18
【问题描述】：

我想要完成并且整天从不同来源阅读后无法弄清楚的是，如何在所有字段都输入后从按钮中获取禁用属性以消失？在这个时间点上，只要他们有东西，田野里有什么并不重要。我研究了一个 addEventListener ，我尝试做一个 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>

谁能指出我做错了什么？

另外，如果我问错了问题，请不要像过去其他人那样关闭我的帖子，我在很大程度上是 stackoverflow 的新手，我根据我看到的发帖规则发帖。我确保只有在需要时我才能编辑它。

【问题讨论】：

我没有读过你的代码，所以如果这太离谱了，请原谅我，但希望这会有所帮助：你不应该能够将事件侦听器添加到你想要的所有输入字段中吗？内容，并侦听input 侦听器...然后当它们中的任何一个触发input 事件时，它们应该运行checkIfAllFieldsAreFilled() 方法，该方法检查它们所有的.input 值。如果他们都没有=== ""，那么设置类似unblockSubmitButton()，如果一个是空白，那么blockSubmitButton() - - - 我真的希望这会有所帮助！
你为什么不提前创建按钮，然后有一个.hide CSS 类什么的，然后当你想显示按钮时Element.classList.remove('hide')。当然你必须使用一个实际的事件......没有createAccount事件。
感谢您的建议，我将尝试两者。这是其中一件事，一旦我弄清楚我将来不会有任何问题。

标签： javascript html forms validation

【解决方案1】：

这行得通。我稍微修改了您的 validateForm() 函数，并添加了另一个监视表单更改的函数。

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();

【讨论】：

【解决方案2】：

您必须在每次输入字段更新时调用validateForm() 函数。你可以用onkeyup event 做这样的事情：

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

这样，一旦满足所有验证条件，您的按钮就会变为活动状态。作为一个选项，您绝对可以在每个输入字段的 html 之外使用事件侦听器来触发validateForm()。

【讨论】：