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

227
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;
}
READ ALSO
Фильтрация массива с датами

Фильтрация массива с датами

Как отфильтрировать или отсортировать массив дат, чтобы в результате были даты, у которых количество минут равно 15?

183
отмена повторного нажатия

отмена повторного нажатия

есть у меня такое колесо, как отменить повторное нажатие кнопки ? у меня на данный момент если колесо остановилось, его можно ещё раз крутить

152
html разметка в строке js

html разметка в строке js

Может кто нибудь подсказать ? использую create-react-appесть вот такой компонент -

140