How to submit different forms with one handler?

Question

PHP

There are 3 different forms of feedback on page, they work individually, but they don’t want to work together. What's wrong?

Form 1

<form class="main" name="form">
              <textarea id="title2" type="text" name="title" value="присоединиться" readonly>присоединиться</textarea>
              <label for="name2">
                <input id="name2" type="text" name="name" required>
                <p>Имя</p>
              </label>
              <label for="tel2">
                <input id="tel2" type="tel" name="tel" required>
                <p>Телефон</p>
              </label>
              <label for="email2">
                <input id="email2" type="email" name="email" required>
                <p>E-mail</p>
              </label>
              <label for="city2">
                <input id="city2" type="text" name="city" required>
                <p>Город</p>
              </label>
             <button id="submit2" class="main" type="submit" name="submit">Отправить</button>
            </form>

Form 2

<form class="main" name="form">
          <input id="title" type="text" name="title" readonly>
          <label for="name">
            <input id="name" type="text" name="name" required>
            <p>Имя</p>
          </label>
          <label for="tel">
            <input id="tel" type="tel" name="tel" required>
            <p>Телефон</p>
          </label>
          <label for="email">
            <input id="email" type="email" name="email" required>
            <p>E-mail</p>
          </label>
          <label for="city">
            <input id="city" type="text" name="city" required>
            <p>Город</p>
          </label>
          <button id="submit" class="main" type="submit" name="submit">Отправить</button>
        </form>

script.js

// Обработчик
$(document).ready(function() {
  $('form').submit(function() {
    if (document.form.name.value == '' || document.form.tel.value == '' || document.form.email.value == '' || document.form.city.value == '' || document.form.title.value == '') {
      valid = false;
      return valid;
    }
    $.ajax({
      type: 'POST',
      url: 'mail.php',
      data: $(this).serialize()
    }).done(function() {
      // После успешной отправки:
      $('#form-block').modal('hide')
      $(this).find('input').val('');
      $('input').removeClass('defocus')
      $('form').trigger('reset');
      $('.sent').css('display', 'flex').hide().fadeIn();
    });
    return false;
  });
});

mail.php

<?php

$recepient = "***@gmail.com";

$title = trim($_POST["title"]);
$name = trim($_POST["name"]);
$tel = trim($_POST["tel"]);
$email = trim($_POST["email"]);
$city = trim($_POST["city"]);
$message = "$title \n\nИмя: $name \nТелефон: $tel \nEmail: $email \nГород: $city";

$headers  = "Content-type: text/plain; charset=utf-8 \r\n";
$headers .= "From: От кого <$email> \r\n";
mail($recepient, $title, $message, $headers);

?>

Answer 1

Qleager , judging by the code, you need e.target or this, which is more convenient,
and I don’t know why you need jQuery

Answer 2

Do you have multiple forms with the same name? Then which of them does this test belong to?

if (document.form.name.value == '' || document.form.tel.value == ''

...