Validation проверяет только 1 форму а не 2? Почему не на другие формы не проходит валидация?
Доброго времени суток! У меня на сайте есть 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> |
<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) }) |
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> |
<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) }) |
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...
Дополнительно:
и каким боком тут пхп?
Потыкался потыкался, во втором файле js поставил #formTrack и заработало. Забавно осознавать, что для этого нужно было пару дней
- обычное дело, еще не раз так будет
- ну тебе и в первой форме нужно поставить id формы, вместо тэга
Ответы:
Пому что id должен быть уникальный на странице. Для правильно работы формы надо установить родительский класс и отталкиваясь от него проводить манипуляции в форме через closest() чтобы полностью отделить одну форму от другой возможной на той-же странице.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для начала, важно понимать, что процесс валидации формы может быть настроен для работы только с определенной формой, и это может быть причиной того, почему валидация не проходит на других формах. Возможно, в вашем коде установлены конкретные условия для проверки только одной формы, и поэтому валидация не работает на других формах.
Чтобы решить эту проблему, необходимо убедиться, что ваш процесс валидации формы настроен правильно для всех форм на вашем сайте. Вам нужно убедиться, что все формы на вашем сайте имеют соответствующие атрибуты и правила валидации.
Ниже приведен пример кода на PHP, который демонстрирует, как можно настроить валидацию для нескольких форм:
if ($_SERVER["REQUEST_METHOD"] == "POST") { if ($_POST["form1_submit"]) { // Валидация для формы 1 // Проверка полей, обязательных для формы 1 } elseif ($_POST["form2_submit"]) { // Валидация для формы 2 // Проверка полей, обязательных для формы 2 } else { // Обработка ошибки, если форма не определена } }
В этом примере кода мы проверяем, какая форма была отправлена, и в зависимости от этого выполняем соответствующую валидацию. Убедитесь, что у ваших форм разные идентификаторы или имена для кнопок отправки, чтобы можно было определить, какая форма была отправлена.
Также не забывайте проверить, что все формы на вашем сайте имеют правильные атрибуты и правила валидации, чтобы избежать проблем с валидацией. Если проблема все еще остается, проверьте также вашу логику валидации и убедитесь, что она корректно работает для всех форм на вашем сайте.