使用 javascript 输入电子邮件和复选框验证以启用提交按钮答案

【问题标题】：Input Email and Checkbox validation to Enable Submit button using javascript使用 javascript 输入电子邮件和复选框验证以启用提交按钮
【发布时间】：2022-02-12 07:26:11
【问题描述】：

我有以下 javascript 代码，用于验证具有某些模式的电子邮件和一个带有我同意 T&C 标签的复选框。如果其中任何一个失败，那么我禁用提交按钮。一切正常，但我使用了太多函数，这会导致一些冲突，如果一个条件成立，则可以单击提交按钮。

我无法同时验证这两个条件，因为它们属于不同的类型。堆栈溢出有一些答案，但它们属于相同类型的字段，例如 2 个输入、3 个复选框，但不是不同的字段。

代码如下：

    window.onload = function ninjaInit() {
  validatEmail();
    validatCheckbox();
  jQuery('#nf-field-20').keyup(validatEmail);
    jQuery('#nf-field-13').change(validatCheckbox);
  }

function validatEmail() {
  var email = document.getElementById('nf-field-20');
    //console.log(email.value);
  if (
    /^[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}$/.test(email.value)) {
    itWorksem();
  } else {
    notWorkingem();
  }
}
function validatCheckbox() {
    if(!jQuery('#nf-field-13').hasClass("nf-checked")){
             console.log('checkbox not checked');
        checkBoGood();
             }else{
             console.log('checkbox checked');
              checkBoBad();
             }
}
    
function itWorksem() {
  var errMessage = document.getElementById("nf-error-20");
  //jQuery("#nf-field-20-wrap").removeClass("nf-error");
  jQuery("#nf-field-15").removeClass("btn-disable");
  jQuery("#nf-field-20").removeClass("input-error");
  errMessage.textContent = "";
}
function notWorkingem() {
  var errMessage = document.getElementById("nf-error-20");
  //jQuery("#nf-field-20-wrap").addClass("nf-error");
  jQuery("#nf-field-15").addClass("btn-disable");
  jQuery("#nf-field-20").addClass("input-error");
  errMessage.textContent = "You need to provide a business address.";
}
function checkBoGood(){
    var errMsgPp = document.getElementById("nf-error-13");
    jQuery("#nf-field-15").removeClass("btn-disable");
//  errMsgPp.textContent = "";
}
function checkBoBad(){
    var errMsgPp = document.getElementById("nf-error-13");
    jQuery("#nf-field-15").addClass("btn-disable");
}

这里需要考虑一些事情：

我无法使用标准函数检查复选框状态，因为该复选框还使用一个类来检查是否通过添加“nf-checked”类来检查它是否被选中，这就是为什么我必须检查该元素是否具有该类是否命名为“nf-checked”。仅供参考这个忍者形式。
我无法使用 Document.ready 和 $，因为这在 WordPress 中不起作用。
所有这些代码都是我自己完成的，所以如果我犯了一些愚蠢的错误，请纠正我。我是 Javascript 的初学者。
如果 Html 有帮助，那么我也在下面添加。我没有添加整个代码，因为我可以使用 ID 定位元素。

<!--Email container Start-->
<div id="nf-field-20-container" class="nf-field-container textbox-container  label-hidden ">
    <div class="nf-before-field">
    </div>
    <div class="nf-field">
        <div id="nf-field-20-wrap" class="field-wrap textbox-wrap" data-field-id="20">
            <div class="nf-field-label"><label for="nf-field-20" id="nf-label-field-20" class="">Work email address  </label>
            </div>
            <div class="nf-field-element">
                <input type="text" value="" class="ninja-forms-field nf-element input-error" placeholder="Work email address" id="nf-field-20" name="nf-field-20" aria-invalid="false" aria-describedby="nf-error-20" aria-labelledby="nf-label-field-20">
                </div>
        </div>
    </div>
    <div class="nf-after-field">
        <nf-section>
            <div class="nf-input-limit">
            </div>
            <div id="nf-error-20" class="nf-error-wrap nf-error" role="alert">You need to provide a business address.</div>    
        </nf-section>
    </div>
</div>
<!--Email container Ends-->

<!--Checkbox Start-->
<div id="nf-field-13-container" class="nf-field-container checkbox-container  label-right one-half first ">
    <div class="nf-before-field">
    </div>
    <div class="nf-field"><div id="nf-field-13-wrap" class="field-wrap checkbox-wrap" data-field-id="13">
        <div class="nf-field-label"><label for="nf-field-13" id="nf-label-field-13" class=" nf-checked-label">I accept hubsell’s <a href="#">privacy policy</a>.  </label>
        </div>
    <div class="nf-field-element">
        <input id="nf-field-13" name="nf-field-13" aria-describedby="nf-error-13" class="ninja-forms-field nf-checked nf-element" type="checkbox" value="1" checked="" aria-labelledby="nf-label-field-13">
        </div>
    </div>
</div>
<div class="nf-after-field"><nf-section>
    <div class="nf-input-limit"></div>
    <div id="nf-error-13" class="nf-error-wrap nf-error" role="alert"></div>
    </nf-section>
    </div>
</div>
<!--Checkbox Ends-->

<!--Submit Start-->
<input id="nf-field-15" class="ninja-forms-field nf-element" type="button" value="Submit">
<!--Submit Ends-->

window.onload = function ninjaInit() {
  validatEmail();
  validatCheckbox();
  jQuery('#nf-field-20').keyup(validatEmail);
  jQuery('#nf-field-13').change(validatCheckbox);
}

function validatEmail() {
  var email = document.getElementById('nf-field-20');
  //console.log(email.value);
  if (
    /^[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}$/.test(email.value)) {
    itWorksem();
  } else {
    notWorkingem();
  }
}

function validatCheckbox() {
  if (!jQuery('#nf-field-13').hasClass("nf-checked")) {
    console.log('checkbox not checked');
    checkBoGood();
  } else {
    console.log('checkbox checked');
    checkBoBad();
  }
}

function itWorksem() {
  var errMessage = document.getElementById("nf-error-20");
  //jQuery("#nf-field-20-wrap").removeClass("nf-error");
  jQuery("#nf-field-15").removeClass("btn-disable");
  jQuery("#nf-field-20").removeClass("input-error");
  errMessage.textContent = "";
}

function notWorkingem() {
  var errMessage = document.getElementById("nf-error-20");
  //jQuery("#nf-field-20-wrap").addClass("nf-error");
  jQuery("#nf-field-15").addClass("btn-disable");
  jQuery("#nf-field-20").addClass("input-error");
  errMessage.textContent = "You need to provide a business address.";
}

function checkBoGood() {
  var errMsgPp = document.getElementById("nf-error-13");
  jQuery("#nf-field-15").removeClass("btn-disable");
  //  errMsgPp.textContent = "";
}

function checkBoBad() {
  var errMsgPp = document.getElementById("nf-error-13");
  jQuery("#nf-field-15").addClass("btn-disable");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--Email container Start-->
<div id="nf-field-20-container" class="nf-field-container textbox-container  label-hidden ">
  <div class="nf-before-field">
  </div>
  <div class="nf-field">
    <div id="nf-field-20-wrap" class="field-wrap textbox-wrap" data-field-id="20">
      <div class="nf-field-label"><label for="nf-field-20" id="nf-label-field-20" class="">Work email address  </label>
      </div>
      <div class="nf-field-element">
        <input type="text" value="" class="ninja-forms-field nf-element input-error" placeholder="Work email address" id="nf-field-20" name="nf-field-20" aria-invalid="false" aria-describedby="nf-error-20" aria-labelledby="nf-label-field-20">
      </div>
    </div>
  </div>
  <div class="nf-after-field">
    <nf-section>
      <div class="nf-input-limit">
      </div>
      <div id="nf-error-20" class="nf-error-wrap nf-error" role="alert">You need to provide a business address.</div>
    </nf-section>
  </div>
</div>
<!--Email container Ends-->

<!--Checkbox Start-->
<div id="nf-field-13-container" class="nf-field-container checkbox-container  label-right one-half first ">
  <div class="nf-before-field">
  </div>
  <div class="nf-field">
    <div id="nf-field-13-wrap" class="field-wrap checkbox-wrap" data-field-id="13">
      <div class="nf-field-label"><label for="nf-field-13" id="nf-label-field-13" class=" nf-checked-label">I accept hubsell’s <a href="#">privacy policy</a>.  </label>
      </div>
      <div class="nf-field-element">
        <input id="nf-field-13" name="nf-field-13" aria-describedby="nf-error-13" class="ninja-forms-field nf-checked nf-element" type="checkbox" value="1" checked="" aria-labelledby="nf-label-field-13">
      </div>
    </div>
  </div>
  <div class="nf-after-field">
    <nf-section>
      <div class="nf-input-limit"></div>
      <div id="nf-error-13" class="nf-error-wrap nf-error" role="alert"></div>
    </nf-section>
  </div>
</div>
<!--Checkbox Ends-->

<!--Submit Start-->
<input id="nf-field-15" class="ninja-forms-field nf-element" type="button" value="Submit">
<!--Submit Ends-->

你可以看到 input[type="checkbox"] 已经有那个 nf-checked 类我在忍者表单中将默认值标记为选中。

更新：我在 ruleboy21 评论之后添加了正确的 HTML 代码。

【问题讨论】：

在输入字段上运行一个事件监听器，并检查每个字符是否匹配应该大大减少这种情况。
请更新您的 HTML。例如。为 nf-error-20 等错误元素添加标记。
@BGPHiJACK 谢谢。正如我提到的，我是这方面的初学者。我会想办法试试，然后告诉你。
@ruleboy21 我已经用正确的 HTML 更新了我的问题。

标签： javascript html jquery css ninja-forms

【解决方案1】：

现在变小了

function validateEmail() {
  let email = document.getElementById('nf-field-20');
  let isWorking =
    /^[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}$/.test(email.value);
    console.log(isWorking);
  indicateStatus(isWorking);
}

function validateCheckbox() {
  jQuery("#nf-field-15").toggleClass("btn-disable", !jQuery('#nf-field-13').hasClass("nf-checked"));
}

function indicateStatus(isWorking) {
  var errMessage = document.getElementById("nf-error-20");
  jQuery("#nf-field-15").toggleClass("btn-disable", !isWorking);
  jQuery("#nf-field-20").toggleClass("input-error", !isWorking);
  errMessage.textContent = "";
}
window.onload = function ninjaInit() {
  validateEmail();
  validateCheckbox();
  jQuery('#nf-field-20').on('keyup', validateEmail);
  jQuery('#nf-field-13').on('change', validateCheckbox);
}

.input-error {
  border: solid red 1px;
}

.btn-disable {
  background-color: #ddffff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--Email container Start-->
<div id="nf-field-20-container" class="nf-field-container textbox-container  label-hidden ">
  <div class="nf-before-field">
  </div>
  <div class="nf-field">
    <div id="nf-field-20-wrap" class="field-wrap textbox-wrap" data-field-id="20">
      <div class="nf-field-label"><label for="nf-field-20" id="nf-label-field-20" class="">Work email address  </label>
      </div>
      <div class="nf-field-element">
        <input type="text" value="" class="ninja-forms-field nf-element input-error" placeholder="Work email address" id="nf-field-20" name="nf-field-20" aria-invalid="false" aria-describedby="nf-error-20" aria-labelledby="nf-label-field-20">
      </div>
    </div>
  </div>
  <div class="nf-after-field">
    <nf-section>
      <div class="nf-input-limit">
      </div>
      <div id="nf-error-20" class="nf-error-wrap nf-error" role="alert">You need to provide a business address.</div>
    </nf-section>
  </div>
</div>
<!--Email container Ends-->

<!--Checkbox Start-->
<div id="nf-field-13-container" class="nf-field-container checkbox-container  label-right one-half first ">
  <div class="nf-before-field">
  </div>
  <div class="nf-field">
    <div id="nf-field-13-wrap" class="field-wrap checkbox-wrap" data-field-id="13">
      <div class="nf-field-label"><label for="nf-field-13" id="nf-label-field-13" class=" nf-checked-label">I accept hubsell’s <a href="#">privacy policy</a>.  </label>
      </div>
      <div class="nf-field-element">
        <input id="nf-field-13" name="nf-field-13" aria-describedby="nf-error-13" class="ninja-forms-field nf-checked nf-element" type="checkbox" value="1" checked="" aria-labelledby="nf-label-field-13">
      </div>
    </div>
  </div>
  <div class="nf-after-field">
    <nf-section>
      <div class="nf-input-limit"></div>
      <div id="nf-error-13" class="nf-error-wrap nf-error" role="alert"></div>
    </nf-section>
  </div>
</div>
<!--Checkbox Ends-->

<!--Submit Start-->
<input id="nf-field-15" class="ninja-forms-field nf-element" type="button" value="Submit">
<!--Submit Ends-->

【讨论】：

谢谢！这适用于输入和复选框。唯一奇怪的是该复选框默认选中，因此它不存在nf-checked 类，并且电子邮件字段标记为红色，因为那里没有值但按钮可以单击。当我取消勾选并再次勾选复选框时，按钮变得不可用。这就像在取消勾选和勾选操作后监听复选框的代码。我的代码也发生了同样的事情，但你肯定会大幅削减代码。

【解决方案2】：

用这个替换你的 JavaScript

jQuery(document).ready(function($){
    // add all the names of the fields you want to validate in this object
    // if the field has a valid default value, give it a value of true else pass false
    let successBag = {
        'nf-field-20': false,
        'nf-field-13': true
    };

    // function to disable the submit button
    function disableForm(key, value){
        if(key) successBag[key] = value;
        if(Object.values(successBag).includes(false)){
            $("#nf-field-15").attr('disabled', 'disabled').addClass("btn-disable");
        }else{
            $("#nf-field-15").removeAttr('disabled').removeClass("btn-disable");
        }
    }
    // disable/enable the form by default
    disableForm(null, null);

    $('#nf-field-20').on('input', function(){
        let errMessage = $("#nf-error-20");

        if(/^([a-zA-Z0-9_.+-]{2,4})+\@(([a-zA-Z0-9-]{2,8})+\.)+([a-zA-Z0-9]{2,4})+$/.test(this.value)){
            $(this).removeClass("input-error");
            errMessage.text("");
            disableForm(this.name, true);
        }else{
            $(this).addClass("input-error");
            errMessage.text("You need to provide a business address.");
            disableForm(this.name, false);
        }
    });
    $('#nf-field-13').on('change', function(){
        let errMessage = $("#nf-error-13");

        if($(this).is(':checked')){
            errMessage.text("");
            disableForm(this.name, true);
        }else{
            errMessage.text("Privacy policy is required.");
            disableForm(this.name, false);
        }
    });
});

【讨论】：

谢谢。我把我的 JS 改成了这个。它没有给出任何控制台错误，但它也不起作用。就像输入字段为空一样，它应该禁用按钮并在字段下方显示错误。它没有显示。我放置了一些控制台消息，以查看代码是否正在完成它的旅程到最后，它是否正在完成它的旅程。仅供参考，我将两个字段的默认值都更改为 false，但得到了相同的结果。我看到您正在使用 :checked 选择器，但我在问题中提到它不起作用。我仍在查看您的解决方案，并将进行编辑并尝试使其正常工作。再次感谢。 :)
@Robin 当您在更改事件中添加 console.log 时，它会起作用吗？
没有。代码围绕更改事件循环，但没有进入。尝试多次单击复选框。在我的代码中使用 jQuery(document).ready(function($) 之前，我没有收到任何错误。我试图更改为我的 window.onload = function ninjaInit() 但它抛出了一个意外的错误' )' 所以我又回到了你的。
更新：代码确实进入了 disableForm 函数，但没有进入输入和更改事件。
我认为您定位到了错误的字段。如果确实是nf-field-20，请检查输入的id。