Как исправить ошибку "event.target.reset is not a function"
Для отправки формы использую just-validate.dev/documentation. При попытке отправить форму выдает ошибку.
const validation = new JustValidate('#form', {
errorFieldCssClass: 'is-invalid',
errorFieldStyle: {
border: '5px solid red',
},
errorLabelStyle: {
fontSize: '12px',
color: '#fcee09',
margin: '7px 0 0',
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end'
},
errorLabelCssClass: 'error',
successFieldCssClass: 'is-valid',
focusInvalidField: true,
lockForm: true,
// errorsContainer: '.errors-container',
}, [{
key: 'Field is required',
dict: {
ru: 'Поле, обязательное для заполнения',
},
},
{
key: 'Name is too short',
dict: {
ru: 'Имя слишком короткое',
},
},
{
key: 'Name is too long',
dict: {
ru: 'Имя слишком длинное',
},
},
{
key: 'Email is required',
dict: {
ru: 'Email - обязательное поле',
},
},
{
key: 'Email is invalid',
dict: {
ru: 'Указан некорректный Email',
},
},
{
key: 'Phone is invalid',
dict: {
ru: 'Указан некорректный телефон',
},
},
{
key: 'Message is too short',
dict: {
ru: 'Сообщение слишком короткое',
},
},
{
key: 'Message is too long',
dict: {
ru: 'Сообщение слишком длинное',
},
}
]);
validation.setCurrentLocale('ru');
validation
.addField('#name', [{
rule: 'required',
errorMessage: 'Field is required',
},
{
rule: 'minLength',
value: 3,
errorMessage: 'Name is too short',
},
{
rule: 'maxLength',
value: 30,
errorMessage: 'Name is too long',
},
])
.addField('#email', [{
rule: 'required',
errorMessage: 'Email is required',
},
{
rule: 'email',
errorMessage: 'Email is invalid',
},
])
.addField('#tel', [{
rule: 'required',
value: true,
errorMessage: 'Field is required',
},
// {
// rule: 'function',
// validator: async function () {
// const phone = tel.inputmask.unmaskedvalue();
// return phone.length === 1;
// },
// errorMessage: 'Phone is invalid',
// },
{
rule: 'minLength',
value: 16,
errorMessage: 'Phone is invalid',
},
// {
// rule: 'maxLength',
// value: 16,
// errorMessage: 'Phone is invalid',
// },
])
.addField('#message', [{
rule: 'required',
errorMessage: 'Field is required',
},
// {
// validator: (value) => {
// return value[1] === '!';
// },
// },
{
rule: 'minLength',
value: 30,
errorMessage: 'Message is too short',
},
{
rule: 'maxLength',
value: 150,
errorMessage: 'Message is too long',
},
]).onSuccess((event) => {
console.log('Validation passes and form submitted', event.target);
let formData = new FormData(event.target);
console.log(...formData);
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log('Отправлено');
}
}
}
xhr.open('POST', 'mail.php', true);
xhr.send(formData);
event.target.reset();
});
document.getElementById('reset').addEventListener('click', function() {
validation.refresh();
})
<script src="https://unpkg.com/just-validate@latest/dist/just-validate.production.min.js"></script>
<form class="contact__form form" id="form" action="#" method="POST" enctype="multipart/form-data" autocomplete="off">
<div class="form__item">
<input class="form__input form__input_name" id="name" type="text" name="name" required="">
<label class="form__label form__label_one" for="name"></label>
</div>
<span class="cyberpunk glitched"></span>
<div class="form__item">
<input class="form__input form__input_email" id="email" type="email" name="email" required="">
<label class="form__label form__label_two" for="email"></label>
</div>
<span class="form__hr"></span>
<div class="form__item">
<input class="form__input form__input_tel" id="tel" type="tel" name="tel" required="">
<label class="form__label form__label_three" for="tel"></label>
</div>
<span class="form__hr"></span>
<div class="form__item form__item_textarea">
<textarea class="form__textarea form__textarea_message" id="message" name="message" required=""></textarea>
<label class="form__label form__label_four" for="message"></label>
</div>
<div class="form__buttons">
<button class="form__button form__button_reset" id="reset" type="reset">
<span class="form__button-text">сброс_</span>
<span class="form__button-glitch">сброс_</span>
<span class="form__button-tag">R19</span></button>
<button class="form__button form__button_send" type="submit">
<span class="form__button-text">отправить_</span>
<span class="form__button-glitch">отправить_</span>
<span class="form__button-tag">R05</span></button>
</div>
</form>
Ответы (1 шт):
Автор решения: Grundy
→ Ссылка
Проблема заключается в
<button class="form__button form__button_reset" id="reset" type="reset">
К полям формы можно обращаться как к свойствам, по id элемента. Таким образом, из-за того что у кнопки id="reset" перекрывается метод формы reset
Для решения достаточно изменить id кнопки.
const validation = new JustValidate('#form', {
errorFieldCssClass: 'is-invalid',
errorFieldStyle: {
border: '5px solid red',
},
errorLabelStyle: {
fontSize: '12px',
color: '#fcee09',
margin: '7px 0 0',
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end'
},
errorLabelCssClass: 'error',
successFieldCssClass: 'is-valid',
focusInvalidField: true,
lockForm: true,
// errorsContainer: '.errors-container',
}, [{
key: 'Field is required',
dict: {
ru: 'Поле, обязательное для заполнения',
},
},
{
key: 'Name is too short',
dict: {
ru: 'Имя слишком короткое',
},
},
{
key: 'Name is too long',
dict: {
ru: 'Имя слишком длинное',
},
},
{
key: 'Email is required',
dict: {
ru: 'Email - обязательное поле',
},
},
{
key: 'Email is invalid',
dict: {
ru: 'Указан некорректный Email',
},
},
{
key: 'Phone is invalid',
dict: {
ru: 'Указан некорректный телефон',
},
},
{
key: 'Message is too short',
dict: {
ru: 'Сообщение слишком короткое',
},
},
{
key: 'Message is too long',
dict: {
ru: 'Сообщение слишком длинное',
},
}
]);
validation.setCurrentLocale('ru');
validation
.addField('#name', [{
rule: 'required',
errorMessage: 'Field is required',
},
{
rule: 'minLength',
value: 3,
errorMessage: 'Name is too short',
},
{
rule: 'maxLength',
value: 30,
errorMessage: 'Name is too long',
},
])
.addField('#email', [{
rule: 'required',
errorMessage: 'Email is required',
},
{
rule: 'email',
errorMessage: 'Email is invalid',
},
])
.addField('#tel', [{
rule: 'required',
value: true,
errorMessage: 'Field is required',
},
// {
// rule: 'function',
// validator: async function () {
// const phone = tel.inputmask.unmaskedvalue();
// return phone.length === 1;
// },
// errorMessage: 'Phone is invalid',
// },
{
rule: 'minLength',
value: 16,
errorMessage: 'Phone is invalid',
},
// {
// rule: 'maxLength',
// value: 16,
// errorMessage: 'Phone is invalid',
// },
])
.addField('#message', [{
rule: 'required',
errorMessage: 'Field is required',
},
// {
// validator: (value) => {
// return value[1] === '!';
// },
// },
{
rule: 'minLength',
value: 30,
errorMessage: 'Message is too short',
},
{
rule: 'maxLength',
value: 150,
errorMessage: 'Message is too long',
},
]).onSuccess((event) => {
console.log('Validation passes and form submitted', event.target, event.target.reset);
let formData = new FormData(event.target);
console.log(...formData);
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log('Отправлено');
}
}
}
xhr.open('POST', 'mail.php', true);
xhr.send(formData);
event.target.reset();
});
document.getElementById('reset').addEventListener('click', function() {
validation.refresh();
})
<script src="https://unpkg.com/just-validate@latest/dist/just-validate.production.min.js"></script>
<form class="contact__form form" id="form" action="#" method="POST" enctype="multipart/form-data" autocomplete="off">
<div class="form__item">
<input class="form__input form__input_name" id="name" type="text" name="name" required="">
<label class="form__label form__label_one" for="name"></label>
</div>
<span class="cyberpunk glitched"></span>
<div class="form__item">
<input class="form__input form__input_email" id="email" type="email" name="email" required="">
<label class="form__label form__label_two" for="email"></label>
</div>
<span class="form__hr"></span>
<div class="form__item">
<input class="form__input form__input_tel" id="tel" type="tel" name="tel" required="">
<label class="form__label form__label_three" for="tel"></label>
</div>
<span class="form__hr"></span>
<div class="form__item form__item_textarea">
<textarea class="form__textarea form__textarea_message" id="message" name="message" required=""></textarea>
<label class="form__label form__label_four" for="message"></label>
</div>
<div class="form__buttons">
<button class="form__button form__button_reset" id="resetB" type="reset">
<span class="form__button-text">сброс_</span>
<span class="form__button-glitch">сброс_</span>
<span class="form__button-tag">R19</span></button>
<button class="form__button form__button_send" type="submit">
<span class="form__button-text">отправить_</span>
<span class="form__button-glitch">отправить_</span>
<span class="form__button-tag">R05</span></button>
</div>
</form>
