如何檢查表格的所有字段是否都已填寫？

Question

我想檢查是否所有輸入都已填充以激活提交按鈕，但是對於我的代碼，它僅檢查一個輸入。

我的HTML（帶有TWIG）：

<div class="content-wrapper  content-wrapper--close">
    <form class="form form--width">
        <fieldset class="form__fieldset input">
            <input class="input__field" id="name" name="name"/>
            <label class="input__label" for="name">Nom et prénom</label>
        </fieldset>

        <fieldset class="form__fieldset input">
            <input class="input__field" id="structure" name="structure"/>
            <label class="input__label" for="structure">Structure</label>
        </fieldset>

        <fieldset class="form__fieldset input">
            <input class="input__field" id="email" name="email"/>
            <label class="input__label" for="email">Adresse email</label>
        </fieldset>

        <fieldset class="form__fieldset input">
            <textarea class="input__field input__field--textarea" name="message" id="message" rows="10">
            </textarea>
            <label class="input__label" for="message">Message</label>
        </fieldset>   

        <fieldset class="form__fieldset">
            <div class="cta is-disabled">
                <input type="submit" class="cta__link button" value="Envoyer">
            </div>
        </fieldset>
    </form>
</div>

我的JavaScript：

/**
 * Add event listener on input.
 *
 * @param form
*/
addListener(form) {
    const inputs = form.querySelectorAll('.input__field');

    [...inputs].map( input => {
        input.addEventListener('focus', (event) => {
            event.target.classList.add('is-fill');
        });

        input.addEventListener('blur', (event) => {
            if (event.target.value === '') {
                event.target.classList.remove('is-fill');
            }
        });
    });
}

// // If all fields are filled, remove class 'is-disabled'

handleInputs(items) {
    const inputs = items.querySelectorAll('.input__field');
    const submitButton = document.querySelector('.form .cta');

    [...inputs].map( input => {
        input.addEventListener('input', (e) => {
            if(e.target.value !== '') {
                submitButton.classList.remove('is-disabled');
            } else {
                if(!submitButton.classList.contains('is-disabled')) {
                    submitButton.classList.add('is-disabled');
                }
            }
        });
    });
}

目前，它僅適用於一個輸入，而我不知道如何檢查所有輸入。 如果有人可以幫助我，我找不到任何答案。 謝謝

Answer 1

每當輸入更改時，您可能需要遍歷每個輸入：

$(document).ready(function () {
        var shouldShowSubmitBtn = true;

        $("input").change(function () {
            $(":input").each(function () {
                if ($(this).val() == '') {
                    shouldShowSubmitBtn = false;
                    return false;
                }
            });
        });
    });

Answer 2

使用HTML5，您可以在表單無效時設置表單按鈕的樣式。 簡單的CSS規則，它將應用樣式。 默認情況下，它也阻止表單提交。

該按鈕將一直保持紅色，直到用有效的姓名，電子郵件和日期填寫表格。 我還添加了一條規則，該規則會更改您的代碼也在執行的當前正在編輯的元素。

 input { margin: .5rem; } input:focus { box-shadow: 0px 0px 5px 5px #0ff; } form:invalid input[type="submit"] { background-color: red } 

 <form> <fieldset> <legend>User:</legend> <label for="name">Name:</label> <input type="text" id="name" required><br> <label for="email">Email:</label> <input type="email" id="email" required><br> <label for="dob">Date of birth:</label> <input type="date" id="bod" required> </fieldset> <input type="submit" /> </form> 

Answer 3

我使用的代碼：

for (const input of inputs) {
            input.addEventListener(`input`, () => {
                for (const input of inputs) {

                        if (input.value.length === 0) {
                            submitButton.disabled = true;
                            cta.classList.add('is-disabled');
                            break;
                        } else {
                            submitButton.disabled = false;
                            cta.classList.remove('is-disabled');
                        }
                    }
            });
        }