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

debugcn 发表于 Dev

约瑟夫

一整天从不同来源读取后，我想要完成的却无法弄清楚的是，如何在所有字段均输入后如何从按钮获取Disabled属性以消失？此时，只要字段中有内容，字段中的内容并不重要。我已经尝试了一个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来说，我大部分时间都是新手，我将根据我看到的发布规则进行发布。我确保仅在需要时才可以对其进行编辑。

肖恩·K。

这有效。我稍微修改了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();

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。