Validating Input Email and Checkbox at the same time to Enable Submit button-CodePudding

I have the following javascript code for a form in which I validate email with certain patterns and a checkbox with I agree with T&C label. If any of them failed then I disable the submit button. It is all working but I am using too many functions which are causing some conflicts in which if one condition gets true then submit button is available to click.

I am not able to verify both conditions at the same time because both are of different types. There are some answers on Stack overflow but they are of the same type of fields like 2 inputs, 3 checkboxes but not different fields.

Here's the code:

    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");
}

Some things need to be considered here:

I am not able to check checkbox status with standard functions because that checkbox also uses a class to check if it is checked or not by adding "nf-checked" class that is why I have to check if that element has the class name "nf-checked" or not. FYI this ninja form.
I can't use Document.ready and $ because that is not working in WordPress.
All this code I have done myself so please correct me if I am doing some silly mistake. I am very much a beginner in Javascript.
If Html helps then I am adding that too below. I am not adding the whole code because I can target element using IDs.

<!--Email container Start-->
<div id="nf-field-20-container" >
    <div >
    </div>
    <div >
        <div id="nf-field-20-wrap"  data-field-id="20">
            <div ><label for="nf-field-20" id="nf-label-field-20" >Work email address  </label>
            </div>
            <div >
                <input type="text" value=""  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 >
        <nf-section>
            <div >
            </div>
            <div id="nf-error-20"  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" >
    <div >
    </div>
    <div ><div id="nf-field-13-wrap"  data-field-id="13">
        <div ><label for="nf-field-13" id="nf-label-field-13" >I accept hubsell’s <a href="#">privacy policy</a>.  </label>
        </div>
    <div >
        <input id="nf-field-13" name="nf-field-13" aria-describedby="nf-error-13"  type="checkbox" value="1" checked="" aria-labelledby="nf-label-field-13">
        </div>
    </div>
</div>
<div ><nf-section>
    <div ></div>
    <div id="nf-error-13"  role="alert"></div>
    </nf-section>
    </div>
</div>
<!--Checkbox Ends-->

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

You can see the input[type="checkbox"] has that nf-checked class already I mark the default value as checked in ninja forms.

Update: I have added the proper HTML code after ruleboy21 comment.

CodePudding user response：

Replace your JavaScript with this

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);
        }
    });
});