@Aleks7766

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>

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...
  • Вопрос задан
  • 99 просмотров
Решения вопроса 1
@Aleks7766 Автор вопроса
Потыкался потыкался, во втором файле js поставил #formTrack и заработало. Забавно осознавать, что для этого нужно было пару дней
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
pLavrenov
@pLavrenov
Разработка сайтов
Пому что id должен быть уникальный на странице. Для правильно работы формы надо установить родительский класс и отталкиваясь от него проводить манипуляции в форме через closest() чтобы полностью отделить одну форму от другой возможной на той-же странице.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы