Блог

Главная - Вопросы по программированию - Убедитесь, что после того, как все входные данные будут иметь значение, сделайте кнопку активной

Убедитесь, что после того, как все входные данные будут иметь значение, сделайте кнопку активной

#javascript

Вопрос:

Я хочу удалить отключенный атрибут с кнопки, когда каждое поле заполнено. Мой код работает, когда заполнен один ввод. Что я здесь делаю не так?

Вот HTML и JS

 checkInput()

function checkInput() {
    let input = document.querySelectorAll('.form-control')
    const button = document.querySelector('.submit-btn')

    input.forEach(function (e) {
        let disabled = true;
        e.addEventListener('keyup', function () {
            if (e.value !== '') {
                disabled = false
            } else {
                disabled = true
                return false
            }

            if(disabled) {
                button.setAttribute('disabled', 'disabled')
            } else {
                button.removeAttribute('disabled')
            }
        })
    })
} 
 <div class="form-group">
  <label for="name">Name*</label>
  <input class="form-control" type="text" id="name" placeholder="Name">
</div>
<div class="form-group">
  <label for="lastName">lastName*</label>
  <input class="form-control" type="text" id="lastName" placeholder="lastName">
</div>
<div class="form-group">
  <label for="fiscalCode">fiscalCode*</label>
  <input class="form-control" type="text" id="fiscalCode" placeholder="fiscalCode">
</div>
<button type="submit" disabled="disabled" class="submit-btn">Continue</button>

Ответ №1:

Это не работает, потому что вы хотите, чтобы все входные данные влияли на состояние кнопки, однако вы проверяете только одну переменную на добавление/удаление отключенного свойства.

Вот фрагмент рабочего кода с примером, в котором я создал массив свойств, по одному для каждого ввода, на которые я могу ссылаться в каждом событии запуска ключа

 checkInput()

function checkInput() {
    let input = document.querySelectorAll('.form-control')
    const button = document.querySelector('.submit-btn')
    const disabled = Array(input.length).fill(true);

    input.forEach(function (e, index) {
        e.addEventListener('input', function () {
            disabled[index] = e.value === ''; // simplified if/else statement of yours

            if(disabled.some(Boolean)) {
                button.setAttribute('disabled', 'disabled')
            } else {
                button.removeAttribute('disabled')
            }
        })
    })
} 
 <div class="form-group">
  <label for="name">Name*</label>
  <input class="form-control" type="text" id="name" placeholder="Name">
</div>
<div class="form-group">
  <label for="lastName">lastName*</label>
  <input class="form-control" type="text" id="lastName" placeholder="lastName">
</div>
<div class="form-group">
  <label for="fiscalCode">fiscalCode*</label>
  <input class="form-control" type="text" id="fiscalCode" placeholder="fiscalCode">
</div>
<button type="submit" disabled="disabled" class="submit-btn">Prosegui</button>

Кроме того, остановка выполнения функции при назначении disabled = true в первом операторе else также является неправильным подходом, так как вы, скорее всего, захотите назначить не только значение disable, но и свойство disabled кнопки.

РЕДАКТИРОВАТЬ: как упоминалось в комментарии CID, разумно изменить прослушиватель событий на ввод, чтобы мы также могли обрабатывать события копирования и вставки

Комментарии:

1. Я бы изменил прослушиватель событий с keyup на input , в случае, если пользователь щелкнет правой кнопкой мыши -> вставить

2. Каков был бы правильный подход, если бы я добавил флажок?

3. просто создайте отдельную переменную, хранящую проверенное значение флажка, или добавьте проверку этого свойства в инструкцию изменения свойства кнопки

Ответ №2:

Вы добавляете событие keyup для каждого поля ввода. это событие проверяет текущее поле ввода только на то, пустое оно или нет. он сам не проверяет 3 поля ввода

это должно сработать:

 checkInput()

function checkInput() {
    let input = document.querySelectorAll('.form-control')
    const button = document.querySelector('.submit-btn')

    input.forEach(function (e) {
        let disabled = true;
        e.addEventListener('keyup', function () {
           const emptyFields =  Array.from(input).filter( input => input.value === "");
           disabled = emptyFields.length > 0;
            if(disabled) {
                button.setAttribute('disabled', 'disabled')
            } else {
                button.removeAttribute('disabled')
            }
        })
    })
}

Комментарии:

1. Каков был бы правильный подход, если бы я добавил флажок?

Ответ №3:

  1. Вы включаете кнопку «Отправить» в keyup случае любых 3 входов. Таким образом, он включается на любых 3 входах.
  2. Удалите кнопку « return Включить отключенный поток для отключения» после очистки.
 checkInput()

function checkInput() {
    let input = document.querySelectorAll('.form-control')
    const button = document.querySelector('.submit-btn')

    input.forEach(function (e) {
        let disabled = true;
        e.addEventListener('keyup', function () {
            if (e.value !== '') {
                disabled = false
            } else {
                disabled = true
                // return false <-- this makes function exit before your disable button
            }
            if(disabled) {
                button.setAttribute('disabled', 'disabled')
            } else {
                button.removeAttribute('disabled')
            }
        })
    })
} 
 <div class="form-group">
  <label for="name">Name*</label>
  <input class="form-control" type="text" id="name" placeholder="Name">
</div>
<div class="form-group">
  <label for="lastName">lastName*</label>
  <input class="form-control" type="text" id="lastName" placeholder="lastName">
</div>
<div class="form-group">
  <label for="fiscalCode">fiscalCode*</label>
  <input class="form-control" type="text" id="fiscalCode" placeholder="fiscalCode">
</div>
<button type="submit" disabled="disabled" class="submit-btn">Continue</button>

Комментарии:

1. завершит return обратный вызов прослушивателя событий, а не вызываемой функции с циклом

2. @Cid да, он также хотел отключить, если пользователь очистит какой-либо конкретный выбор. Этот код включит кнопку только при вводе любого поля и не отключит ее снова, если пользователь очистит ее.

Ответ №4:

Другое решение состоит в том, чтобы проверить, заполнены ли все входные данные при каждом изменении любого ввода.

 addHandlers();

// Return true if all fields are not empty
function areAllFieldsFilledOut() {
    let inputs = document.querySelectorAll('.form-control');
  let result = true;
  
  inputs.forEach(e => {
    if (e.value === "")
        result = false;
  });
  
  return resu<
}

// Add keyup event handlers to all input fields
function addHandlers() {
    let inputs = document.querySelectorAll('.form-control');
    const button = document.querySelector('.submit-btn');

    inputs.forEach(e => {
        // On each change in any input, check if all inputs are
        // not empty, and if true, enable the button
        e.addEventListener('keyup', e => {
            let result = areAllFieldsFilledOut();

            if (result) {
                button.removeAttribute('disabled');
            } else {
                button.setAttribute('disabled', 'disabled');
            }
        });
    });
} 
 <div class="form-group">
  <label for="name">Name*</label>
  <input class="form-control" type="text" id="name" placeholder="Name">
</div>
<div class="form-group">
  <label for="lastName">lastName*</label>
  <input class="form-control" type="text" id="lastName" placeholder="lastName">
</div>
<div class="form-group">
  <label for="fiscalCode">fiscalCode*</label>
  <input class="form-control" type="text" id="fiscalCode" placeholder="fiscalCode">
</div>
<button type="submit" disabled="disabled" class="submit-btn">Prosegui</button>

Ответ №5:

Вот мой ответ:

 function checkInput() {
    document.querySelectorAll('input').forEach(input => {

        input.addEventListener('keyup', function () {
            let emptyFieldsCount = Array.from(input).filter(input => input.value == "").length;
            
            if (emptyFieldsCount > 0) {
                button.setAttribute('disabled', 'disabled')
            } else {
                button.removeAttribute('disabled')
            }

        })

    });
}
Метки: , , ,