Jquery.Validate() делает гет запрос

Question

$('form').validate({
        rules: {
            Name: {
                required: true,
                maxlength: 20,
            },
            SecondName: {
                required: true,
                maxlength: 20,
            },
            LastName: {
                required: true,
                maxlength: 20,
            },
            Email: {
                required: true,
            },
            PhoneNumber: {
                required: true,
                maxlength: 30,
                digits: true,
            },
        },
        messages: {
            Name: {
                required: "Это поле обязательно",
                maxlength: "Это поле не должно быть больше 20 символов",
            },
            SecondName: {
                required: "Это поле обязательно",
                maxlength: "Это поле не должно быть больше 20 символов",
            },
            LastName: {
                required: "Это поле обязательно",
                maxlength: "Это поле не должно быть больше 20 символов",
            },
            Email: {
                required: "Это поле обязательно",
                email: "Укажите правильный адрес почты"
            },
            PhoneNumber: {
                required: "Это поле обязательно",
                maxlength: "Это поле не должно быть больше 30 символов",
                digits: "Это поле должно содержать только цифры"
            },
        },
        errorClass: "invalid"
    });

    $('form').on('submit', function (e) {
        e.preventDefault();
        let Name = $('#Name').val();
        let SecondName = $('#SecondName').val();
        let LastName = $('#LastName').val();
        let PhoneNumber = $('#PhoneNumber').val();
        let Email = $('#Email').val();
        let Commentary = $('#Commentary').val();

        $.ajax({
            url: "/SendEmail",
            method: "post",
            dataType: "json",
            data: {
                Name: Name,
                SecondName: SecondName,
                LastName: LastName,
                PhoneNumber: PhoneNumber,
                Email: Email,
                Commentary: Commentary
            },
            success: function (e) {
                $('.modal').modal('hide');
                $('textarea').val('');
                $('input').val('');
            }
        });
    });

Это мой код. Работаю на Laravel 8. Валидация отправляет каждый раз гет запрос при успешной валидации. Как вообще лучше привязать эти 2 события, чтобы без валидации не шел аякс запрос ну и вообще 2 эти события связать друг с другом?

Answer 1

Можно использовать параметр submitHandler

$('form').validate({
  rules: {
    Name: {
      required: true,
      maxlength: 20,
    },
    SecondName: {
      required: true,
      maxlength: 20,
    },
    LastName: {
      required: true,
      maxlength: 20,
    },
    Email: {
      required: true,
    },
    PhoneNumber: {
      required: true,
      maxlength: 30,
      digits: true,
    },
  },
  messages: {
    Name: {
      required: "Это поле обязательно",
      maxlength: "Это поле не должно быть больше 20 символов",
    },
    SecondName: {
      required: "Это поле обязательно",
      maxlength: "Это поле не должно быть больше 20 символов",
    },
    LastName: {
      required: "Это поле обязательно",
      maxlength: "Это поле не должно быть больше 20 символов",
    },
    Email: {
      required: "Это поле обязательно",
      email: "Укажите правильный адрес почты"
    },
    PhoneNumber: {
      required: "Это поле обязательно",
      maxlength: "Это поле не должно быть больше 30 символов",
      digits: "Это поле должно содержать только цифры"
    },
  },
  errorClass: "invalid",
  // добавляем обработчик submit'a
  submitHandler: function(form, event) {
    event.preventDefault();
    // так же, если данные находятся внутри формы, то
    // данные можно брать так:
    // let Name = $(form).find('#Name').val();
    // если все эти поля есть в форме то можно
    // сразу в ajax вставить все данные с формы
    // у которых есть атрибут name (пр. <input name="Name" id="Name"/>):
    // ...
    // data: $(form).serialize(),
    // ...
    let Name = $('#Name').val();
    let SecondName = $('#SecondName').val();
    let LastName = $('#LastName').val();
    let PhoneNumber = $('#PhoneNumber').val();
    let Email = $('#Email').val();
    let Commentary = $('#Commentary').val();

    $.ajax({
      url: "/SendEmail",
      method: "post",
      dataType: "json",
      data: {
        Name: Name,
        SecondName: SecondName,
        LastName: LastName,
        PhoneNumber: PhoneNumber,
        Email: Email,
        Commentary: Commentary
      },
      success: function (e) {
        $('.modal').modal('hide');
        $('textarea').val('');
        $('input').val('');
      }
    });
  }
});

БЛОГ НА HUSL

Jquery.Validate() делает гет запрос

Ответы (1 шт):