禁用＆＃x27;提交＆＃x27;除非检查框，否则按钮

Question

从上一个问题开始，我问 提交按钮不使用JS验证

我真的很努力地在检查复选框的一部分以成为表单验证的一部分。

我的html是，

    <h1>Applicant Form</h1>
    <div class="container">
      <form action="create-lead.php" id="newLead" class="form" method="POST">
        <div class="form-field">
          <label for="firstName">First Name</label>
          <input type="text" name="firstName" id="firstName" id="firstName">
          <small></small>
        </div>
        <div class="form-field ">
          <label for="lastName">Last Name</label>
          <input type="text" name="lastName" id="lastName" id="lastName">
          <small></small>
        </div>
        <div class="form-field">
          <label for="email">Email</label>
          <input type="text" name="email" id="email">
          <small></small>
        </div>
        <div class="form-field">
          <label for="telephone">Telephone</label>
          <input type="text" name="telephone" id="telephone">
          <small></small>
        </div>
        <div class="form-field dropdown">
          <label for="buyerType" class="buyerType">Application Type</label>
          <select class="secondary" name="buyerType" id="buyerType">
            <option value="Purchase">Purchase</option>
            <option value="FirstTimeBuyer">First Time Buyer</option>
            <option value="Remortgage">Remortgage</option>
            <option value="RaiseFunds">Raise Funds</option>
          </select>
        </div>
        <div class="form-field">
          <label class="check-container" for="accept">
              <input class="check" type="checkbox" id="accept" name="accept" value="yes">
              I agree to the <a href="#">terms and conditions</a>
            </label>
          <small></small>
        </div>
        <div class="form-field buttons">
          <input class="submitButton" type="submit" name="submitButton" id="submitButton">
          <input class="clear" type="reset" name="reset" id="reset">
        </div>
      </form>
    </div>
    <script src="js/app.js"></script>
  

并且app.js是

const firstNameEl = document.querySelector('#firstName');
const lastNameEl = document.querySelector('#lastName');
const emailEl = document.querySelector('#email');
const telephoneEl = document.querySelector('#telephone');
const checkedEl = document.getElementById('#accept');
const submitButton = document.getElementById('#submitButton');

const form = document.querySelector('#newLead');

const checkFirstName = () => {
    let valid = false;

    const firstName = firstNameEl.value.trim();

    if (!isRequired(firstName)) {
        showError(firstNameEl, 'First name cannot be left blank');
    } else if (!isFirstNameValid(firstName)) {
        showError(firstNameEl, 'First name must only contain letters');
    } else {
        showSuccess(firstNameEl);
        valid = true;
    };
    return valid;
};

const checkLastName = () => {
    let valid = false;

    const lastName = lastNameEl.value.trim();

    if (!isRequired(lastName)) {
        showError(lastNameEl, 'Last name cannot be left blank');
    } else if (!isLastNameValid(lastName)) {

        showError(lastNameEl, 'Last name must only contain letters');

    } else {
        showSuccess(lastNameEl);
        valid = true;
    }
    return valid;
};

const checkEmail = () => {
    let valid = false;
    const email = emailEl.value.trim();
    if (!isRequired(email)) {
        showError(emailEl, 'Email field cannot be left blank');
    } else if (!isEmailValid(email)) {
        showError(emailEl, 'Email is not valid')
    } else {
        showSuccess(emailEl);
        valid = true;
    }
    return valid;
};
const checkTelephone = () => {
    let valid = false;
    const telephone = telephoneEl.value.trim();
    if (!isRequired(telephone)) {
        showError(telephoneEl, 'Telephone field cannot be left blank');
    } else if (!isTelephoneValid(telephone)) {
        showError(telephoneEl, 'Number is not valid')
    } else {
        showSuccess(telephoneEl);
        valid = true;
    }
    return valid;
};

// const checkedElValid = () => {
//     if (!document.querySelector('#submitButton').checked) {
//         showError(, 'You must accept the terms to continue')
//     } else {
//         showSuccess(accept);
//         valid = true;
//     }
//     return valid;
// };

const isFirstNameValid = (firstName) => {
    const re = /^[a-zA-Z]+$/;
    return re.test(firstName);
};

const isLastNameValid = (lastName) => {
    const re = /^[a-zA-Z]+$/;
    return re.test(lastName);
};


const isEmailValid = (email) => {
    const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
};

const isTelephoneValid = (telephone) => {
    const re = /^[0-9]+$/;
    return re.test(telephone);
};

const isRequired = value => value === '' ? false : true;


const showError = (input, message) => {
    const formField = input.parentElement;
    formField.classList.remove('success');
    formField.classList.add('error');

    const error = formField.querySelector('small');
    error.textContent = message;
};

const showSuccess = (input) => {
    const formField = input.parentElement;

    formField.classList.remove('error');
    formField.classList.add('success');

    const error = formField.querySelector('small');
    error.textContent = '';
}


form.addEventListener('submit', function(e) {
    //validate fields
    let isFirstNameValid = checkFirstName(),
        isLastNameValid = checkLastName(),
        isEmailValid = checkEmail(),
        isTelephoneValid = checkTelephone();
        IsCheckedElValid = checkedElValid();


    let
        isFormValid = 
        isFirstNameValid &&
        isLastNameValid &&
        isEmailValid &&
        isTelephoneValid &&
        IsCheckedElValid;


    if (!isFormValid) {
        e.preventDefault();
        submitButton.disabled;
    } else {
        submitButton.disabled == false;

    };

});
// real time validation
const debounce = (fn, delay = 500) => {

    let timeoutId;

    return (...args) => {
        if (timeoutId) {
            clearTimeout(timeoutId);
        }
        timeoutId = setTimeout(() => {
            fn.apply(null, args)
        }, delay);
    };
};
//event delegation
form.addEventListener('input', debounce(function(e) {
    switch (e.target.id) {
        case 'firstName':
            checkFirstName();
            break;
        case 'lastName':
            checkLastName();
            break;
        case 'email':
            checkEmail();
            break;
        case 'telephone':
            checkTelephone();
            break;
    }
}));

我包含了评论的部分，因为这是我正在尝试尝试将复选框包含在验证的一部分中的功能。

其他所有内容都可以完美地工作，但是我需要确保用户在发送表格之前接受条款和条件。

看来e.preventdefault（）和sumberbutton.disabled 否则不正常，除非我缺少某些东西。.

我相对较新，没有使此工作正常工作的经验！

编辑

https://stackoverflow.com/a/72778291/18227124”的建议进行

，

form.addEventListener("submit", function() {
    //validate fields
    let isFirstNameValid = checkFirstName(),
        isLastNameValid = checkLastName(),
        isEmailValid = checkEmail(),
        isTelephoneValid = checkTelephone();
    let
        isFormValid = 
        isFirstNameValid &&
        isLastNameValid &&
        isEmailValid &&
        isTelephoneValid;

    if (isFormValid) {
        let submitBtn = document.querySelector("button");
        let checkBox = document.getElementById("accept");

        checkBox.addEventListener("click", function () {
            if (checkBox.checked) {
               // submitBtn.disabled == false;
                submitBtn.disabled = false;
            } else {
               // submitBtn.disabled == true;
                submitBtn.disabled = true;
            }
        });
    };
    
});

[2年后的编辑] 将比较运算符==更改为=在实现的解决方案中，请评论以表明我的愚蠢。

Answer 1

您的代码太长了，涉及检查，但是基本想法不是让用户单击提交按钮，直到他们通过了所有验证，而不是允许他们单击提交，然后查看所有内容是否有效。

因此，我们在复选框上设置单击事件处理程序，该复选框仅根据检查复选框而启用或禁用提交按钮。这样做时，不需要destextdefault（）。

这是一个缩小的示例，您可以将其整合到代码中：

let submitBtn = document.querySelector("button");
document.querySelector("input").addEventListener("click", function(){
  if(this.checked){
    submitBtn.disabled = false;
  } else {
    submitBtn.disabled = true;
  }
});

<input type="checkbox"> I agree to the terms.
<button disabled>Submit</button>