使用JavaScript实现邮箱格式校验与服务条款复选框校验以启用提交按钮的代码冲突问题

Let's break down the issues with your current code and fix them step by step—since you're new to JS, I'll keep this clear and explain each change:

Key Issues in Your Original Code #

1. Checkbox Logic is Reversed: Your code enables the submit button when the checkbox is not checked, and disables it when it is checked—this is exactly backwards from what you need!
2. Independent State Control: Each validation function (email/checkbox) was toggling the button's state on its own, which caused conflicts. For example, if your email passed validation, the button would enable even if the checkbox wasn't checked, and vice versa.
3. Regex Bug: Your email regex had an unescaped . in the domain section (.[a-zA-Z0-9-.]{2,61})—this matches any character instead of a literal dot, which would let invalid emails slip through.

Corrected Code #

Here's the revised code that fixes all these issues, follows your Ninja Forms/WordPress constraints, and validates both fields together:

window.onload = function ninjaInit() {
    // Run validation on page load (since checkbox is checked by default)
    validateForm();
    // Bind events to trigger validation
    jQuery('#nf-field-20').keyup(validateForm);
    jQuery('#nf-field-13').change(validateForm);
};

function validateForm() {
    // Get elements we need
    const emailField = document.getElementById('nf-field-20');
    const checkbox = jQuery('#nf-field-13');
    const submitButton = jQuery('#nf-field-15');
    const emailError = document.getElementById('nf-error-20');
    // const checkboxError = document.getElementById('nf-error-13'); // Uncomment if you need checkbox error messages

    // 1. Validate email format (fixed regex with escaped dot)
    const emailRegex = /^[a-zA-Z0-9._%+-]+@(?!gmail.com)(?!yahoo.com)(?!hotmail.com)(?!yahoo.co.in)(?!aol.com)(?!live.com)(?!outlook.com)[a-zA-Z0-9_-]+\.[a-zA-Z0-9-.]{2,61}$/;
    const isEmailValid = emailRegex.test(emailField.value);

    // 2. Validate checkbox (check for "nf-checked" class)
    const isCheckboxChecked = checkbox.hasClass("nf-checked");

    // Update email field styling and error message
    if (isEmailValid) {
        emailField.classList.remove('input-error');
        emailError.textContent = "";
    } else {
        emailField.classList.add('input-error');
        emailError.textContent = "You need to provide a business address.";
    }

    // Update checkbox error message if needed (uncomment below if you want this)
    // if (isCheckboxChecked) {
    //     checkboxError.textContent = "";
    // } else {
    //     checkboxError.textContent = "You must accept the privacy policy.";
    // }

    // 3. Control submit button state: Enable ONLY if BOTH conditions are met
    if (isEmailValid && isCheckboxChecked) {
        submitButton.removeClass("btn-disable");
    } else {
        submitButton.addClass("btn-disable");
    }
}

What Changed? #

• Unified Validation: Instead of separate functions for email and checkbox, we have one validateForm function that checks both fields every time either one changes. This ensures we always consider both conditions before enabling the button.
• Fixed Checkbox Logic: We now check if the checkbox has the nf-checked class to confirm it's selected, and only enable the button if this is true.
• Fixed Regex: Added an escaped dot (\.) in the domain part of the email regex to ensure it matches a literal dot.
• Cleaner State Management: All button state changes happen in one place, so there's no conflict between functions.
• Initial Validation: We run validateForm() on page load to set the correct button state right away (since your checkbox is checked by default).

Notes for Your Setup #

• Since you're using Ninja Forms, the btn-disable class should properly disable the button—if it doesn't, you might need to add a bit of CSS to make it unclickable:

  .btn-disable {
      pointer-events: none;
      opacity: 0.6;
  }
  

• I commented out the checkbox error message section—uncomment those lines if you want to show an error when the checkbox isn't checked.

内容的提问来源于stack exchange，提问作者Robin