Как сделать проверку чекбокса?

Как сделать проверку чекбокса в момент отправки формы? Должны проверяться сразу все input элементы, а у checkbox добавляется класс is-invalid, когда он выбран, запутался с этим.

const form = document.querySelector(".form-container");

  form.addEventListener("submit", (evt) => {
    if (!validateForm()) {
      evt.preventDefault();
    } else {
      validateForm();
    }
  });

  const validationRules = {
    required: {
      test: (val) => { return val.length > 0 },
      error: (field) => `Please enter a valid ${field}`,
    },
    email: {
      test: (val) => {
        let regex = /^[A-Z0-9._%+-]+@[A-Z0-9-]+.+.[A-Z]{2,4}$/i;

        return regex.test(val)
      },
      error: (field) => `Please enter a valid ${field}`
    },
  };

  const fileFields = Array.prototype.slice.call(form.querySelectorAll('[data-field]')).map(field => {
    let entry = field.querySelector('[data-validate]');

    return {
      wrap: field,
      entry: entry,
      message: field.querySelector('[data-validate-mess]'),
      rules: !!entry.dataset.validate ? entry.dataset.validate.split('|') : [],
      validateName: !!entry.dataset.validateAs ? entry.dataset.validateAs : entry.name,
      isValid: null
    };
  });


  fileFields.forEach((item) => {
    if(item.rules.length) {
      item.entry.addEventListener('change', () => {
        validateField(item);
      });
    }
  });

  const validateForm = () => {
    let formIsValid = true;
    fileFields.forEach(field => {
      formIsValid = validateField(field) ? formIsValid : false;
    });

    return formIsValid;
  }

  const validateField = (field) => {
    field.isValid = true;

    field.rules.forEach(rule => {
      if(validationRules.hasOwnProperty(rule) &&
        !validationRules[rule].test(field.entry.value)) {
        field.isValid = false;
        showError(field, validationRules[rule].error(field.validateName));
      } else if (validationRules.hasOwnProperty(rule) && field.entry.checked) {
        field.isValid = false;
        showError(field, validationRules[rule].error(field.validateName));
      }

    });

    if(field.isValid){
      hideError(field);
    }
    return field.isValid;

  }

  const showError = (field, message) => {
    field.message.innerHTML = message;
    field.wrap.classList.add('is-invalid');
  }

  const hideError = (field) => {
    field.message.innerHTML = '';
    field.wrap.classList.remove('is-invalid');
  }
.error {
  color: red;
}
<div class="form-container">
  <form class="form" method="POST" action="">
    <div class="form-input" data-field="">
      <label for="name">Name</label>
      <input id="name" type="text" data-validate="name|required" data-validate-as="name">
      <span class="error" data-validate-mess=""></span>
    </div>
    <div class="form-input" data-field="">
      <label for="email">Email</label>
      <input id="email" type="text" data-validate="email|required" data-validate-as="email">
      <span class="error" data-validate-mess=""></span>
    </div>
    <div class="form-input" data-field="">
      <input id="privacy" type="checkbox" data-validate="checked|required" data-validate-as="checkbox">
      <label for="privacy">I agree</label>
      <span class="error" data-validate-mess=""></span>
    </div>
    <button type="submit">Send</button> 
  </form>
</div>


Ответы (1 шт):

Автор решения: highpassion

Так должно сработать только на field.validateName, у которого значение checkbox

const form = document.querySelector(".form-container");

  form.addEventListener("submit", (evt) => {
    if (!validateForm()) {
      evt.preventDefault();
    } else {
      validateForm();
    }
  });

  const validationRules = {
    required: {
      test: (val) => { return val.length > 0 },
      error: (field) => `Please enter a valid ${field}`,
    },
    email: {
      test: (val) => {
        let regex = /^[A-Z0-9._%+-]+@[A-Z0-9-]+.+.[A-Z]{2,4}$/i;

        return regex.test(val)
      },
      error: (field) => `Please enter a valid ${field}`
    },
  };

  const fileFields = Array.prototype.slice.call(form.querySelectorAll('[data-field]')).map(field => {
    let entry = field.querySelector('[data-validate]');

    return {
      wrap: field,
      entry: entry,
      message: field.querySelector('[data-validate-mess]'),
      rules: !!entry.dataset.validate ? entry.dataset.validate.split('|') : [],
      validateName: !!entry.dataset.validateAs ? entry.dataset.validateAs : entry.name,
      isValid: null
    };
  });


  fileFields.forEach((item) => {
    if(item.rules.length) {
      item.entry.addEventListener('change', () => {
        validateField(item);
      });
    }
  });

  const validateForm = () => {
    let formIsValid = true;
    fileFields.forEach(field => {
      formIsValid = validateField(field) ? formIsValid : false;
    });

    return formIsValid;
  }

  const validateField = (field) => {
    field.isValid = true;

    field.rules.forEach(rule => {
      if(validationRules.hasOwnProperty(rule) &&
        !validationRules[rule].test(field.entry.value)) {
        field.isValid = false;
        showError(field, validationRules[rule].error(field.validateName));
      } else if (validationRules.hasOwnProperty(rule) && !(field.entry.checked) && field.validateName == "checkbox" ) {
        field.isValid = false;
        showError(field, validationRules[rule].error(field.validateName));
      }

    });

    if(field.isValid){
      hideError(field);
    }
    return field.isValid;

  }

  const showError = (field, message) => {
    field.message.innerHTML = message;
    field.wrap.classList.add('is-invalid');
  }

  const hideError = (field) => {
    field.message.innerHTML = '';
    field.wrap.classList.remove('is-invalid');
  }
.error {
  color: red;
}
<div class="form-container">
  <form class="form" method="POST" action="">
    <div class="form-input" data-field="">
      <label for="name">Name</label>
      <input id="name" type="text" data-validate="name|required" data-validate-as="name">
      <span class="error" data-validate-mess=""></span>
    </div>
    <div class="form-input" data-field="">
      <label for="email">Email</label>
      <input id="email" type="text" data-validate="email|required" data-validate-as="email">
      <span class="error" data-validate-mess=""></span>
    </div>
    <div class="form-input" data-field="">
      <input id="privacy" type="checkbox" data-validate="checked|required" data-validate-as="checkbox">
      <label for="privacy">I agree</label>
      <span class="error" data-validate-mess=""></span>
    </div>
    <button type="submit">Send</button> 
  </form>
</div>

→ Ссылка