Номер телефона возвращает null и выдает ошибку. хотя не должен
Делал валидацию для номера телефона. использовал switch case и метод match(), для проверки валидации. Но возникла проблема, что он если не подходит под регулярку (то-есть то что я пиши в input), оно дает ошибку что 0 равняется null (0 это то что нашла регулярка методом match()). И 2 проблема, постоянно я не могу найти input если консолю к примеру переменую telephon, а если консолю как раз input оно мне пишет undefined
<form class="form-contact"></form>
const form = document.querySelector(".form-contact");
const regExTelephon = /(\+)?((\d{2})?\(?0)\d{2}\)?(\d{3})(\d{2})(\d{2})/;
Валидация телефона
function check_value(input) {
const regExObj = {
[input.name]: input.value,
objname : input.name
}
if (input.value.trim()) {
switch (input.name) {
case "telephon":
const tel_spase = input.value.replace(/\s/g,'')
const telephon = tel_spase.match(regExTelephon);
if(telephon[0] !== telephon.input) {
regExObj.error = "Номер не корректен"
return regExObj
}
const tel_group = telephon[0].replace(regExgTelGroup,`38 ($2) $3 $4 $5`)
break;
}
regExObj[input.name] = input.value
return regExObj
} else {
regExObj.error = 'Поле должно быть заполнено'
return regExObj
}
}
собитые submit
form.addEventListener("submit", (e) => {
e.preventDefault();
const input = document.querySelectorAll(".form-item__input");
input.forEach((input) => {
const result = check_value(input);
if(result.error) {
input.classList.add("_error")
document.querySelector(`.form-error_${result.objname}`).innerHTML = result.error;
} else {
input.classList.remove("_error")
document.querySelector(`.form-error_${result.objname}`).innerHTML = "";
}
});
});
функция сохдания input на JS
const arr_form = [
["text", "name", "Your name"],
["text", "telephon", "Mobile"],
["text", "email", "Email"],
]
function inputForm(e) {
let obj_str = "";
for(let e of arr_form) {
obj_str += `
<div class="form-item">
<input type="${e[0]}" class="form-item__input" name="${e[1]}" placeholder="${e[2]}">
<span class="form-error_${e[1]}"></span>
</div>
`;
}
form.innerHTML += obj_str;
}
inputForm()
function formSub() {
const text_and_sub = `
<textarea class="form__textarea" placeholder="Your Message"></textarea>
<button class="form-submit" type="submit">SEND</button>
`;
form.innerHTML += text_and_sub;
}
formSub()
|
Alexander3928,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Цитата:
Я отредактировал прошлое сообщение. Надеюсь теперь все будет ок и рассшитываю на помощь :) |
Alexander3928,
не дробите на части, делайте макет целиком, чтоб можно было сразу искать проблему, а не собирать по кусочку. Цитата:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<form class="form-contact"></form>
<script>
const form = document.querySelector(".form-contact");
const regExTelephon = /(\+)?((\d{2})?\(?0)\d{2}\)?(\d{3})(\d{2})(\d{2})/;
function check_value(input) {
const regExObj = {
[input.name]: input.value,
objname: input.name
}
if (input.value.trim()) {
switch (input.name) {
case "telephon":
const tel_spase = input.value.replace(/\s/g, '');
const err = !regExTelephon.test(regExTelephon);
if (err) {
regExObj.error = "Номер не корректен";
return regExObj
}
const telephon = tel_spase.match(regExTelephon);
const tel_group = telephon[0].replace(regExgTelGroup, `38 ($2) $3 $4 $5`);
break;
}
regExObj[input.name] = input.value
return regExObj
} else {
regExObj.error = 'Поле должно быть заполнено'
return regExObj
}
}
form.addEventListener("submit", (e) => {
e.preventDefault();
const input = document.querySelectorAll(".form-item__input");
input.forEach((input) => {
const result = check_value(input);
if (result.error) {
input.classList.add("_error")
document.querySelector(`.form-error_${result.objname}`).innerHTML = result.error;
} else {
input.classList.remove("_error")
document.querySelector(`.form-error_${result.objname}`).innerHTML = "";
}
});
});
const arr_form = [
["text", "name", "Your name"],
["text", "telephon", "Mobile"],
["text", "email", "Email"],
]
function inputForm(e) {
let obj_str = "";
for (let e of arr_form) {
obj_str += `
<div class="form-item">
<input type="${e[0]}" class="form-item__input" name="${e[1]}" placeholder="${e[2]}">
<span class="form-error_${e[1]}"></span>
</div>
`;
}
form.innerHTML += obj_str;
}
inputForm()
function formSub() {
const text_and_sub = `
<textarea class="form__textarea" placeholder="Your Message"></textarea>
<button class="form-submit" type="submit">SEND</button>
`;
form.innerHTML += text_and_sub;
}
formSub()
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 19:22. |