Почему метод объекта не является функцией?

121
11 января 2022, 01:20

Пишу валидацию формы. Вот код:

const Validator = function(options) { 
  const form = document.getElementById(options.id), 
    elementsForm = [...form.elements].filter(item => item.tagName !== 'BUTTON'), 
    error = new Set(), 
    pattern = { 
      email: /^\w+@\w+\.\w+$/, 
      phone: /^\+?[78]([()-]*\d){10}$/ 
    }, 
 
    validorMethod = { 
      notEmpty(elem) { 
        if (elem.value.trim() === "") { 
          return false; 
        } 
        return true; 
      }, 
      pattern(elem, pattern) { 
        return pattern.test(elem.value); 
      } 
    } 
 
  const isValid = (elem) => { 
    const method = options.method[elem.id]; 
    if (method !== undefined) { 
      return method.every(item => validorMethod[item[0]](elem, pattern[item[1]])); 
    } 
    return true; 
  }; 
  const checkIt = (event) => { 
    let target = event.target; 
    if (isValid(target)) { 
      showSuccess(target); 
      error.delete(target); 
    } else { 
      showError(target); 
      error.add(target); 
    } 
    console.log(error); 
  }; 
  elementsForm.forEach((elem) => { 
    elem.addEventListener('change', checkIt); 
  }); 
 
  const showError = (elem) => { 
    elem.classList.remove('validator_success'); 
    elem.classList.add('validator_error'); 
    if (!elem.nextElementSibling.classList.contains('error-message')) { 
      const errorDiv = document.createElement('div'); 
      errorDiv.textContent = "You have an error there"; 
      errorDiv.classList.add('error-message'); 
      elem.insertAdjacentElement('afterend', errorDiv); 
    } 
  }; 
 
  const showSuccess = (elem) => { 
    elem.classList.remove('validator_error'); 
    elem.classList.add('validator_success'); 
    if (elem.nextElementSibling.classList.contains('error-message')) { 
      elem.nextElementSibling.remove(); 
    } 
  }; 
 
  for (let key in options.pattern) { 
    pattern[key] = options.pattern[key]; 
  }; 
 
  form.addEventListener('submit', (event) => { 
    elementsForm.forEach((elem) => { 
      checkIt({ 
        target: elem 
      }); 
    }); 
    if (error.size) { 
      event.preventDefault(); 
    } 
  }) 
}; 
 
const valid = new Validator({ 
  id: 'myform', 
  pattern: { 
    phone: /^\+380\w{9}/ 
  }, 
  method: { 
    'email': [ 
      ['notEmpty'], 
      ['patern', 'email'] 
    ], 
    'phone': [ 
      ['notEmpty'], 
      ['patern', 'phone'] 
    ] 
  } 
});
<section> 
  <form id="myform"> 
    <label for="email">email</label> 
    <input type="text" name="email" id="email"> 
    <label for="phone">phone</label> 
    <input type="text " name="phone" id="phone"> 
    <br> 
    <button type="submit">submit</button> 
    <button type="reset">reset</button> 
  </form> 
</section>

Когда я ввожу некорректные данные возникает следующая ошибка:

validator.js:25 Uncaught TypeError: validorMethod[item[0]] is not a function
at validator.js:25
at Array.every ()
at isValid (validator.js:25)
at HTMLInputElement.checkIt (validator.js:31)

Вот и на github залил https://github.com/Streammer/form-validation.git

READ ALSO
Ищу реализации (код) прокси сервера на Android

Ищу реализации (код) прокси сервера на Android

До этого писал прокси сервер на для некоторых целей на Windows, однако не совсем представляю, как сделать это на Android

97
Как проверить на равенство несколько значений?

Как проверить на равенство несколько значений?

Имеются переменные a, b, c, d, значения которых вычисляются в процессе выполнения программыНапример сейчас:

98
Сравнение списков ArrayList

Сравнение списков ArrayList

Подскажите, как можно сравнить подобные списки, чтобы получить истину?

203
Если запускаю джар файл через cmd то файл не создается

Если запускаю джар файл через cmd то файл не создается

Есть джарник, в нем прописанно копирование этого же джарника в другую папку(через Runtime)1случай:Когда я запускаю код без кмд(ком

183