Как предотвратить запуск jQuery .submit при ошибках формы

Question

У меня есть шлюз формы для PDF.Пользователь отправляет форму, затем получает PDF по электронной почте и перенаправляет их на URL PDF.Проблема, с которой я столкнулся, заключается в том, что перенаправление работает, когда обязательные поля формы остаются пустыми.Я кратко вижу сообщения об ошибках поля, прежде чем он перенаправляет пользователя в PDF независимо.Я что-то упустил?

Это отличается от Использование JQuery - предотвращение отправки формы .Если обязательные поля не заполнены, jQuery .submit () и его содержимое не должны ничего делать.Я добавил .preventDefault(), но он все еще срабатывает при нажатии кнопки отправки без заполнения обязательных полей.

Проблема заключается в строке jQuery(location).attr('href', productDownloadFile).Это не должно происходить без правильного заполнения полей.

Мой код:

jQuery('#gform_5').submit(function (e) {
    e.preventDefault();

    var pathname = window.location.pathname;
    jQuery.cookie('cookie-name', pathname, {path: pathname}); // Set cookie to prevent multiple form entries.

    // Close modal on form submit and redirect to the PDF.
    setTimeout(function() {
        jQuery('.pdf-gateway').removeClass('is-visible');
        jQuery(location).attr('href', productDownloadFile); // productDownloadFile set in functions.
    }, 3000);
});

Answer 1

Что касается моего комментария, вот более подробный ответ.

Чтобы запретить отправку формы с обязательными полями, оставьте пустым, установите атрибут required в этих полях:

<input type="text" required />

Этоскажет браузеру показать сообщение при попытке отправить родительскую форму.Кроме того, вы можете захотеть отследить случай неполной отправки формы на серверной стороне, а также, чтобы избежать противоречивых данных, если исходный код обрабатывается или браузер не может обработать обязательный атрибут по какой-либо причине!В лучшем случае можно использовать такую ​​среду, как MVC-Framework, в которой состояние required задано в модели, из которой строится форма / шаблон, и которая обрабатывает сохранение данных.Это потому, что если что-то меняется, вы не хотите редактировать несколько вещей, особенно не большие js-файлы.

Sidenote: Ответ, который вы предоставляете, содержит js для добавления обязательного атрибута.Это плохая практика.Если в другом месте есть ошибка, которая препятствует правильному выполнению сценария, это приведет к еще большему количеству ошибок, чем просто ошибка.Если возможно, не исправляйте плохой исходник с помощью JavaScript!

Answer 2

Хорошо, благодаря приведенному выше комментарию xcy7e, проблема заключалась в том, что я использую Gravity Forms, и вместо добавления обычного атрибута «required» вместо него добавляется «data-required = 'true» ».Обошел это с jQuery('[aria-required="true"]').attr('required', 'required');