#javascript #forms #function #validation
#javascript #формы #функция #проверка
Вопрос:
Я пытаюсь выполнить эту функцию, но не могу запустить ее. Моя консоль.журналы вообще не запускаются в консоли. Эта функция должна проверять электронные письма при отправке только для определенного домена.
function emailValid() {
console.log('first')
var formInput = document.querySelectorAll('t186__input');
console.log('input');
var formSubmit = document.querySelectorAll('t-submit');
console.log('submit');
formSubmit.addEventListener('click', function(e) {
e.preventDefault();
console.log('click');
if (formInput.val().indexOf('@rbc.com') !== -1) {
return true;
console.log('hey2');
} else {
alert("You have entered an invalid email address");
return false;
}
});
} <div class="t186__wrapper">
<div class="t186__blockinput">
<input type="text" name="EMAIL" class="t186__input t-input js-tilda-rule" value="" placeholder="Your E-mail" data-tilda-rule="email" style="color:#000000; border:1px solid #000000;" />
</div>
<div class="t186__blockbutton">
<button type="submit" class="t-submit" style="color:#ffffff;background-color:#000000;">Subscribe</button>
</div>
</div> Ответ №1:
Здесь у вас есть ряд ошибок. Исправлено.
1/.
- Не нужно
querySelectorAll - Вы вложили свой код инициализации в функцию, поэтому она никогда не вызывалась.
- Ваш querySelector не использовал
.модификатор класса.
var formInput = document.querySelector('.t186__input');
console.log('input');
var formSubmit = document.querySelector('.t-submit');
console.log('submit');
formSubmit.addEventListener('click', function(e) {
console.log('click');
if (formInput.value.indexOf('@rbc.com') !== -1) {
return true;
console.log('hey2');
} else {
e.preventDefault();
alert("You have entered an invalid email address");
return false;
}
}); <div class="t186__wrapper">
<div class="t186__blockinput">
<input type="text" name="EMAIL" class="t186__input t-input js-tilda-rule " value="" placeholder="Your E-mail" data-tilda-rule="email" style="color:#000000; border:1px solid #000000; "> </div>
<div class="t186__blockbutton">
<button type="submit" class="t-submit" style="color:#ffffff;background-color:#000000;">Subscribe</button>
</div>
</div> Дальнейший порядок
document.addEventListener('click', function(e) {
if (e.target.matches('.t-submit')) {
let regEx = /@rbc.com/;
if (regEx.test(document.querySelector('.t186__input').value) === false) {
e.preventDefault();
e.stopPropagation();
alert("You have entered an invalid email address");
return false;
}
}
}); <div class="t186__wrapper">
<div class="t186__blockinput">
<input type="text" name="EMAIL" class="t186__input t-input js-tilda-rule " value="" placeholder="Your E-mail" data-tilda-rule="email" style="color:#000000; border:1px solid #000000; "> </div>
<div class="t186__blockbutton">
<button type="submit" class="t-submit" style="color:#ffffff;background-color:#000000;">Subscribe</button>
</div>
</div> Завернутый в from и обработанный событием отправки. Должен предположить, что где-то там должен быть элемент формы 🙂
// In this example we need to wait for the DOM to be ready.
document.addEventListener('DOMContentLoaded', () => {
// Code in here will execute the the HTML is loaded and the DOM is ready for use.
setUpFormListener('t_frmSubmit'); // <--- replace with your form class name
});
function setUpFormListener(frmClassName) {
// In this demo, we bind directly to the form submit. (note we use form.[class] to ensure we only select the form
document.querySelector(`form.${frmClassName}`)
.addEventListener('submit', function(e) {
let regEx = /@rbc.com/;
if (regEx.test(document.querySelector('.t186__input').value) === false) {
e.preventDefault();
e.stopPropagation();
alert("You have entered an invalid email address");
return false;
}
});
} <form class="t_frmSubmit" submit="_blank">
<div class="t186__wrapper">
<div class="t186__blockinput">
<input type="text" name="EMAIL" class="t186__input t-input js-tilda-rule " value="" placeholder="Your E-mail" data-tilda-rule="email" style="color:#000000; border:1px solid #000000; "> </div>
<div class="t186__blockbutton">
<button type="submit" class="t-submit" style="color:#ffffff;background-color:#000000;">Subscribe</button>
</div>
</div>
</form> Комментарии:
1. Привет, Бибберти, спасибо за твое исправление. Это работает хорошо, но кнопка отправки по-прежнему отправляет информацию, даже несмотря на наличие функции preventDefault() и return false. Как я могу заставить is прекратить отправку формы?
2. Нам нужно перейти на событие отправки, посмотрим и исправим позже. Я добавлю примерный элемент ‘form’ к примеру.
3. Спасибо! Просто для справки, мне нужно использовать этот конкретный html.
4. Понятно, но я предполагаю, что у вас это внутри элемента ‘<form>’?
5. @IgorVoytt можете ли вы проверить, я предполагаю, что вы оборачиваете входные данные в
<form>элемент. Если вы можете посмотреть и, возможно, опубликовать элемент, мы можем добавить код для исправления.
Ответ №2:
querySelectorAll('t186__input') и querySelectorAll('t-submit') ищет элементы с тегами <t186__input и <t-submit .
На основе вашего HTML это классы для элементов. Поэтому используйте class селектор
querySelectorAll('.t186__input') и querySelectorAll('.t-submit')
Также querySelectorAll возвращает массив узлов, поэтому вам придется сначала перебрать их, чтобы получить доступ к каждому элементу.
Если вы ожидаете использовать только один элемент с этим классом, используйте querySelector вместо этого.
Также вы только что определили функцию, но нигде не вызываете emailvalid функцию.
Комментарии:
1. Я думаю, что в коде есть фундаментальное недоразумение. События добавляются в форму внутри метода validate. Вызов селекторов выполнен правильно, но я думаю, что есть общая проблема. Также обратите внимание на использование
val()это синтаксис jQuery и недопустимо в Vanilla наряду с отменой события, мы хотим отменить только в том случае, если электронное письмо недействительно.