Доброго времени суток! У меня на сайте есть 2 формы. Для отправки формы использую validation.jquery.js; С отправкой первой формы все прекрасно, но 2 форма не отправляется. Обновляется страница и все, в консоли выдает ошибку
Uncaught Error: Form with formTrack selector not found! Please check the form selector
at Z.initialize (just-validate.min.js:1:5750)
at new Z (just-validate.min.js:1:5475)
at main.js:59:21
Пробовал разъединять,делал отдельный js - не помогло. Возможно, что в силу своего незнания я что-то пропускаю, но найти ответ мне все не удается.
Скинул внизу несколько данных, сначала все по 1 форме, после по 2
<form id="form" class="form form__body">
<label class="label__text" for="username">Ваши контакты</label>
<div class="form__contact">
<input id="name" class="form__contact-inp" type="text" name="name" placeholder="Имя*" required>
<input class="form__contact-inp" type="text" id="email" name="email" placeholder="Email*" required>
<input class="form__contact-inp" type="tel" id="tel" name="tel" placeholder="+7(___)___-__-__*" required>
</div>
<label class="label__text label__text-info" for="info">Информация о доставке</label>
<div class="delivery__form">
<label for="delivery">Выберите способ доставки:</label>
<select class="delivery__select" id="delivery" name="delivery" required>
<option value="">Выбрать способ</option>
<option value="Перевозки фурами">Перевозки фурами</option>
<option value="Транспортом до 14т">Транспортом до 14т</option>
<option value="Рефрижераторные перевозки">Рефрижераторные перевозки</option>
<option value="Перевозки леса, труб">Перевозки леса, труб</option>
<option value="Негабароитные перевозки">Негабароитные перевозки</option>
<option value="Международные перевозки">Международные перевозки</option>
</select>
</div>
<div class="form__info">
<input class="form__info-inp form__info-width" id="cityStart" name="cityStart" type="text" placeholder="Город отправления">
<input class="form__info-inp form__info-width" id="cityFinish" name="cityFinish" type="text" placeholder="Город доставки">
<input class="form__info-inp form__info-width" id="boxWeight" name="boxWeight" type="number" placeholder="Вес">
</div>
<div class="user__acceptance checkbox">
<input id="forAgreerment" class="user__acceptance-inp" type="checkbox" name="agreement" value="1" aria-invalid="false" required>
<label for="forAgreerment" class="checkbox__acceptance">
<span class="checkbox__text">Нажимая кнопку «Рассчиать стоимость», я даю свое согласие на обработку моих персональных данных</span>
</label>
</div>
<button type="submit" class="btn btn__form">Рассчитать стоимость</button>
</form>
let selector = document.querySelector("#tel")
let im = new Inputmask("+7(999)999-99-99")
im.mask(selector)
let validation = new JustValidate("form", {
errorFieldCssClass: '_error'
});
validation.addField("#name", [
{
rule: "required",
errorMessage: ' '
}
]).addField("#email", [
{
rule: "required",
errorMessage: ' '
}
]).addField("#tel", [
{
validator: (value) => {
const phone = selector.inputmask.unmaskedvalue()
return Boolean(Number(phone) && phone.length > 0)
},
rule: "required",
errorMessage: ' '
}
]).addField("#forAgreerment", [
{
rule: "required",
errorMessage: ' '
}
]).onSuccess(async function () {
let data = {
name: document.getElementById("name").value,
tel: selector.inputmask.unmaskedvalue(),
email: document.getElementById("email").value,
delivery: document.getElementById("delivery").value,
cityStart: document.getElementById("cityStart").value,
cityFinish: document.getElementById("cityFinish").value,
boxWeight: document.getElementById("boxWeight").value
}
let response = await fetch("mail.php", {
method: "POST",
body: JSON.stringify(data),
headers: {
"Content-Type": "application/json; charset=UTF-8"
}
})
let result = await response.text()
alert(result)
})
------------------------------Далее 2-я форма----------------------------------------
<form class="form" id="formTrack">
<div class="form__track">
<div class="form__track-img">
</div>
<div class="form__track-right">
<label for="number">Ваш номер заявки</label>
<div>
<input id="numberTrack" name="numberTrack" class="form__track-inp" type="number" placeholder="Номер заявки" required>
</div>
<label for="Email">Email</label>
<div>
<input name="mail" id="mail" class="form__track-inp" type="email" placeholder="Email" required>
</div>
<button type="submit" class="btn btn__form-track">Получить данные</button>
</div>
</div>
</form>
let validationTwo = new JustValidate("formTrack", {
errorFieldCssClass: '_error'
})
validationTwo.addField("#numberTrack", [
{
rule: "required",
errorMessage: '!'
}
]).addField("#mail", [
{
rule: "required",
errorMessage: '!'
}
]).onSuccess(async function () {
let data = {
numberTrack: document.getElementById("numberTrack").value,
mail: document.getElementById("mail").value
}
let response = await fetch("mailTwo.php", {
method: "POST",
body: JSON.stringify(data),
headers: {
"Content-Type": "application/json; charset=UTF-8"
}
})
let result = await response.text()
alert(result)
})
при этом, если это важно php 2 разных файла mail и mailTwo
https://ssl.timeweb.ru/?referrer=regionaltransport...