Чего я пытаюсь достичь и не могу понять после чтения из разных источников в течение всего дня, так это то, как я могу отключить атрибут 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 и публикую сообщения на основе правил, которые я вижу для публикации. Я убедился, что только при необходимости я могу это редактировать.

4
Josepch 15 Янв 2021 в 05:17

2 ответа

Лучший ответ

Это работает. Я немного изменил вашу функцию 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();
1
Sean K. 15 Янв 2021 в 06:09

Вы должны вызывать функцию validateForm() при каждом обновлении поля ввода. Вы можете сделать что-то подобное с помощью события onkeyup:

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

Таким образом, как только все критерии проверки будут выполнены, ваша кнопка должна стать активной. Как вариант, вы можете определенно использовать прослушиватели событий вне вашего HTML для каждого поля ввода вместо того, чтобы запускать validateForm().

1
farhodius 15 Янв 2021 в 06:39
65729582