1 Востаннє редагувалося Yola (22.11.2023 19:24:49)

Тема: Як відправляти форму на сервер, щоб користувачу було зручно

Мені треба доволі складну форму відправити на сервер (декілька). Я думав шаблон Post-Redirect-Get, але тут виникає питання, що робити, якщо дані не пройшли валідацію на сервері. Адже хочеться, щоб користувачу не довелось знов набирати дані. Тут я бачу два підходи:

1. Вважати, що це проблеми користувача, адже така сама валідація відбувається на клієнті, отже користувач робить щось не те.
2. Використати якесь веб-арі, щоб додати через нього, а тоді вже або відобразити помилки або, у разі успіху, перенаправити куди треба.

Що порадите?

2

Re: Як відправляти форму на сервер, щоб користувачу було зручно

Коротка відповідь - JavaScript. На стороні "клієнта", яким в даному випадку виступає веб-сторінка, відтворити всі валідації в JavaScript, тоді форма навіть не піде далі поки не будуть виправлені всі помилки при валідації.

Незрозуміло до чого саме є доступ, бо якщо є можливість вносити зміни в частині бекенду, тоді можна всі введені дані повертати назад у response разом з помилкою.

Було б надано більше деталей "тз", тоді б авдиторія подумала краще.

3

Re: Як відправляти форму на сервер, щоб користувачу було зручно

2.

Yola написав:

Вважати, що це проблеми користувача, адже така сама валідація відбувається на клієнті,

Ми цього не знаємо. HTTP відповідь може містити вказівки про валідацію на стороні клієнта, але це не значить що клієнт їх виконає. Такі вказівки варто зприймати саме як рекомендації (для клієнта), а не вимоги. Web (еталонний) розроблений консорціумом так, щоб сервер не мав контролю над клієнтами.

Yola написав:

отже користувач робить щось не те.

Користувач робить що хоче. Сервер отримує запит з якимись даними, і якщо дані не валідні, то має віддати заповнену форму [крім паролів, вони мають бути порожніми].

frz написав:

Коротка відповідь - JavaScript. На стороні "клієнта"

*FACEPALM*

4 Востаннє редагувалося frz (22.11.2023 21:13:07)

Re: Як відправляти форму на сервер, щоб користувачу було зручно

leofun01 написав:
frz написав:

Коротка відповідь - JavaScript. На стороні "клієнта"

*FACEPALM*

В класичному розумінні в співвідносинах користувач - веб аплікація клієнтом є браузер. Однак в архітектурі самої веб-аплікації є фронтенд і бекенд. Фронтенд з точки зору бекенду виступає умовно як клієнт. Назвіть по-своєму якщо вам моя термінологія не подобається. Ок, нехай буде просто "фронтенд". Саме на ньому повинна бути реалізована попередня перевірка.

5

Re: Як відправляти форму на сервер, щоб користувачу було зручно

frz написав:

Назвіть по-своєму якщо вам моя термінологія не подобається.

Стосовно термінології питань не маю.

Мене тріґерить сама пропозиція користувати js на стороні клієнта. І це при тому, що автор топіка взагалі не говорив про js.

6 Востаннє редагувалося frz (23.11.2023 02:03:48)

Re: Як відправляти форму на сервер, щоб користувачу було зручно

leofun01 написав:
frz написав:

Назвіть по-своєму якщо вам моя термінологія не подобається.

Стосовно термінології питань не маю.

Мене тріґерить сама пропозиція користувати js на стороні клієнта. І це при тому, що автор топіка взагалі не говорив про js.

Якісь доволі базові перевірки даних можна реалізувати на HTML5. Плюс візуалізація невірних даних за допомогою CSS.
Більш просунуті перевірки можливі на стороні бекенду, при цьому потрібно повертати все у фронтенд назад джейсоном за допомогою response, аби не тайпати наново.

Але щоб не ганяти дані туди-сюди, достатньо js. Звісно що форма має бути робочою на випадок якщо юзвір вимкнув js. Тоді, якщо js недоступне через налаштування браузера, спрацьовують лише базові перевірки HTML5, а решта валідується на стороні бекенду і надсилається назад джейсоном на фронтенд, якщо ще не все виправлено.

7

Re: Як відправляти форму на сервер, щоб користувачу було зручно

Пост крім помилки може повертати і всі дані, які отримав. Тоді їх занести відповідні поля.

Подякували: leofun01, Yola2

8

Re: Як відправляти форму на сервер, щоб користувачу було зручно

Дякую всім, буду відправляти назад.

9 Востаннє редагувалося HetmanNet (25.11.2023 22:29:34)

Re: Як відправляти форму на сервер, щоб користувачу було зручно

Yola написав:

Мені треба доволі складну форму відправити на сервер (декілька). Я думав шаблон Post-Redirect-Get, але тут виникає питання, що робити, якщо дані не пройшли валідацію на сервері. Адже хочеться, щоб користувачу не довелось знов набирати дані. Тут я бачу два підходи:

1. Вважати, що це проблеми користувача, адже така сама валідація відбувається на клієнті, отже користувач робить щось не те.
2. Використати якесь веб-арі, щоб додати через нього, а тоді вже або відобразити помилки або, у разі успіху, перенаправити куди треба.

Що порадите?

Робити валідацію на стороні клієнта (JS), але всі помилки валідації на клієнті дублювати запитом на сервер (для статистики та аналізу косяків, бо можете не знати що через ваш косяк не проходить валідацію і відповідно відсутнє надсилання форми).
Вразі непроходження валідації на сервері попри відсутність помилок з клієнта на сервері логувати запит (про всяк), та вважати що то проблеми користувача а не ваші.

10

Re: Як відправляти форму на сервер, щоб користувачу було зручно

На стороні клієнта можна робити валідацію, можна не робити (це питання зручності користувача), але на стороні сервера валідацію робити обов'язково, інакше відкривається можливість послати на ваш сервер невалідні дані, наприклад, щоб вивести його з ладу.

11

Re: Як відправляти форму на сервер, щоб користувачу було зручно

Зараз повернувся до цього питання і зрозумів чого воно в мене виникло. Виходить, що мені у разі успіху треба повертати перенаправлення, а у разі помилки повертати сторінку з моделлю. І я не знаю як це поєднати в одному методі OnPost.

12 Востаннє редагувалося frz (05.12.2023 15:59:05)

Re: Як відправляти форму на сервер, щоб користувачу було зручно

Ну ось приклад для Python / Flask - у випадку якщо будь-яка з валідацій не пройшла, то дані повертаються назад у вигляді json із http кодом 422 (Unprocessable Entity), при цьому data може бути теж вкладеним джейсоном

якщо ж валідація проходить успішно, то повертається http код 200 і тоді data назад не надсилається

from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/api/data', methods=['POST'])
def receive_data():
    data = request.get_json()

    if 'key' not in data or not isinstance(data['key'], str) or not data['key']:
        return jsonify({'status': 'error', 'message': 'Invalid key', 'data': data}), 422

    if 'value' not in data or not isinstance(data['value'], int):
        return jsonify({'status': 'error', 'message': 'Invalid value', 'data': data}), 422

    return jsonify({'status': 'success', 'message': 'Data processed successfully'}), 200

13

Re: Як відправляти форму на сервер, щоб користувачу було зручно

@frz, дякую!

Я знайшов як це зробити в Razor

if (ModelState.IsValid)
{
    ...
    return LocalRedirect(...);
}
else
{
    ...
    return Page();
}

14 Востаннє редагувалося Droid 77 (09.12.2023 00:51:17)

Re: Як відправляти форму на сервер, щоб користувачу було зручно

Я загалом і не зрозумів суті запитання першого посту.
Що значить відправити форму на сервер? Це що за дичина?
На сервер можливо відправити лише запит від клієнта.

15

Re: Як відправляти форму на сервер, щоб користувачу було зручно

Droid 77 написав:

Я загалом і не зрозумів суті запитання першого посту.
Що значить відправити форму на сервер? Це що за дичина?
На сервер можливо відправити лише запит від клієнта.

Ну це він і є. "відправити форму" значить відправити всі дані якоїсь форми, яку клієнт заповнив і дав submit.
А "відправити запит" це про будь-який запит. "Відкрити web стоінку" часто (не завжди) це теж "відправити запит".

Подякували: Yola1

16

Re: Як відправляти форму на сервер, щоб користувачу було зручно

Якщо ми говоримо про термінологію, то "голий" запит це за допомогою чогось типу curl / postman, а тут більше йдеться про юзвір-френдлі юайку, тому це все одно запит але загорнений у веб-форму. Клієнтом можна дуже умовно назвати саму сторінку, а сервер тоді - бекенд частина. На сайті в залежності від архітектури може бути дещо важче розділити голий фронт від голого беку.

leofun01 написав:

"Відкрити web стоінку" часто (не завжди) це теж "відправити запит".

Навіть якщо це статика, то запит GET відбувається все одно - достатньо відкрити консоль браузера і там все це видно. Лише у випадках якщо абсолютно всі статичні об'єкти закешовані і кеш ще не заекспайрився, тоді запит GET не відбувається, оскільки все вже й так знаходиться на пристрої користувача.

17

Re: Як відправляти форму на сервер, щоб користувачу було зручно

frz написав:
leofun01 написав:

"Відкрити web стоінку" часто (не завжди) це теж "відправити запит".

Навіть якщо це статика, то запит GET відбувається все одно - достатньо відкрити консоль браузера і там все це видно. Лише у випадках якщо абсолютно всі статичні об'єкти закешовані і кеш ще не заекспайрився, тоді запит GET не відбувається, оскільки все вже й так знаходиться на пристрої користувача.

Все на багато простіше. Web сторінка це будь-який [X]HTML документ, який може бути візуально представлений на екрані, має DOM, і його можна змінювати.

В твоєму web переглядачі відкрий налаштуваня. Якщо відкрилась ще одна вкладка, то є велика ймовірність що це окрема web сторінка, згенерована на основі файла прочитаного з диска або з віртуальної памяті. При цьому запит не було відправлено. В firefox URL: about:config, в chrome URL: chrome://flags . При потребі, таку web сторінку теж можна змінювати через DevTools.

18

Re: Як відправляти форму на сервер, щоб користувачу було зручно

Потрібно зразу уточняти на які мові бекенд, який фреймворк і т.п. Переважно фреймворки мають для цього вже вбудований функціонал.
Наприклад якшо це php і laravel то там є типу такої штуки:

Route::post('/blablabla', function () {
    //...
    return back()->withInput();
});

для nodejs теж є всякі ліби, для nestjs, express.

Суть така - записати надіслані дані в сесію, ними заповнити форму, і при наступному запиті ці дані з сесії видалити (session flash data). Зробити як middleware

19

Re: Як відправляти форму на сервер, щоб користувачу було зручно

mikeos написав:

Суть така - записати надіслані дані в сесію, ними заповнити форму, і при наступному запиті ці дані з сесії видалити (session flash data). Зробити як middleware

Записувати дані в сесію - звучить страхітливо.

20 Востаннє редагувалося mikeos (12.12.2023 23:20:32)

Re: Як відправляти форму на сервер, щоб користувачу було зручно

Yola написав:

Записувати дані в сесію - звучить страхітливо.

І чому? ) Наприклад в ларавел це реалізовано через сесії, в дотнет не знаю, думаю так само, все рівно десь зберігаються дані форми перед редіректом