时间戳

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

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

问题描述

我试图完成并且整天从不同来源阅读后无法弄清楚的是，一旦所有字段都输入，我如何从按钮中获取禁用属性以消失？在这个时间点上，只要他们有东西，田野里有什么并不重要。我研究了一个 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的新手，我根据我看到的发布规则发布。我确保只有在需要时才能编辑它。

标签： javascripthtmlformsvalidation

解决方案

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

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

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

推荐阅读