Помогите с валидацией

149

23 июня 2022, 14:50

помогите пожалуйста с валидацией, не бейте ногами, не так давно начал заниматься вебом, не могу понять как мне проверить что форма полностью прошла валидацию, сделал свою валидацию, она проверяет инпуты на то что они валидны. Но я запутался как мне получить ответ что форма полностью валидна и может быть отправлена?


(function () {
    var forms = document.querySelectorAll('.js-form')
    var emailMask = /^[A-Z0-9._-]+@[A-Z0-9.-]+\.[A-Z0-9.-]+$/i;
    
    var isValid = false
    if( forms.length <1){
        return
    }
    forms.forEach(function (form){
        console.log('новая форма')
        var inputs = form.querySelectorAll('input')
        var submitButton = form.querySelector('.js-submit-button')
        if(!submitButton) {
            return
        }
        submitButton.addEventListener('click', function (){
            validateForm(inputs)
        })
        form.addEventListener('submit', function (e){
            e.preventDefault()
            validateForm(inputs)
        })
    })
    function validateForm(inputs){
        inputs.forEach(function (input){
            validateInput(input)
        })
        console.log('isvalid', isValid)
    }
    function validateInput(input){
        console.log(input.type)
        isValid = true
        if(input.type === 'email') {
            if(input.value.length < 1 || !emailMask.test(input.value)) {
                isValid = false
                addError(input)
            }else if(input.value.length < 3) {
                isValid = false
                addError(input)
            } else {
                removeError(input)
            }
        }
        if(input.type === 'text') {
            if(input.required) {
                if(input.value.length < 1) {
                    addError(input)
                } else {
                    removeError(input)
                }
            } else {
                removeError(input)
            }
        }
        if(input.type === 'password'){
            if(input.required) {
                if(input.value.length < 6) {
                    addError(input)
                } else {
                    removeError(input)
                }
            } else {
                removeError(input)
            }
        }
        if(input.type === 'checkbox'){
            if(input.required) {
                if(!input.checked){
                    addError(input)
                }else{
                    removeError(input)
                }
            }else {
                removeError(input)
            }
        }
    }
    function addError(input){
        if(input.type === 'checkbox'){
            let parent = input.closest('div')
            parent.querySelector('label').classList.add('label-error')
        }else {
            input.classList.add('input-error')
        }
    }
    function removeError(input){
        console.log('good')
        if(input.type === 'checkbox'){
            let parent = input.closest('div')
            parent.querySelector('label').classList.remove('label-error')
        }else {
            input.classList.remove('input-error')
        }
    }
    function showSuccess(form) {
        form.classList.add('form--success');
        const submitBtn = form.querySelector('.js-form-submit');
        setTimeout(() => {
            submitBtn.classList.add('disabled');
            form.classList.add('form--success');
            form.reset();
        }, 2000)
    }
})();

Answer 1

function validateForm(inputs){
  var result = true;
  inputs.forEach(function (input){
    if (!validateInput(input))
      result = false;
  })
  console.log('isvalid', isValid);
  return result;
}
//submitButton.addEventListener('click', function (){
//  validateForm(inputs)
//})
form.addEventListener('submit', function (e){
  if (!validateForm(inputs))
    e.preventDefault();
});
function validateInput(input){
  ...
  return isValid;
}