Сергей delphinpro

Делать валидацию при каждом нажатии

doOrderBtn.addEventListener('click', function (el) {
    const phio = document.querySelector('#name')
    const phone = document.querySelector('#phone')
    const address = document.querySelector('#address')
    if (phio.value < 1 && phone.value < 1 && address.value < 1) {
        el.preventDefault()
    }
});

PS
Лучше вешать на submit формы.

.layout {
    width: 1660px;
+   max-width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    row-gap: 100px;
    margin: auto;
}

.layout {
-   width: 1660px;
+   width: 100%;
+   max-width: 1660px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    row-gap: 100px;
    margin: auto;
}

От обратного

form:has(:invalid) button {
  display: none;
}

-----------------------
Но вообще с точки зрения юзабилити, я считаю плохой практикой прятать или дизаблить кнопку.
Лишня когнитивная нагрузка на пользователя: "где кнопка? как отправить форму? почему она не нажимается? я же вроже все заполнил..."

Лучше оставить возможность нажатия кнопки отправки и прямо уведомлять юзера о его ошибках по нажатию.

Почему у вас код контроллера лежит в неймспейсе App\Http\Controllers (хотя и файла такого не видно)
В роутах вы запрашиваете из неймспейса \App\Http\Controllers\Api\V2
Это как-то странно.

PS

'password' => 'required|min:8|regex:/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).+$/',

Для валидации паролей есть специальные правила https://laravel.com/docs/11.x/validation#validatin...

нарисовать градиентом на фоне грид-контейнера

Нормально всё работает

window.addEventListener('DOMContentLoaded', function() {
    let game = localStorage.getItem('game');
    document.getElementById('game').innerHTML = game;
});

Посмотрите в dev-tools что реально записывается. Атрибут class там по-любому есть.

Скорее всего, вы просто ошиблись в наименовании класса, вот стили и не применяются.

pointer-events: none; - блок с таким стилем "невидим" для указателя (мышки), и никак на нее не реагирует

Я не вижу каких-то особых требований к разметке.
Поэтому два грид-контейнера

первые две строки
grid-template-columns: 100px repeat(3, 1fr);

вторые две строки
grid-template-columns: repeat(3, 1fr);

Нахер здесь бутстрап, мне непонятно. Он для жестко-заданной 12-колонной сетки только и подходит...

а вам какая разница, какие символы будут в пароле?
вы все равно пароль захешируете, и даже сохранять его не должны в исходном виде.

Однако, вы можете слушать событие oninput и проверять, что ввел пользователь.
далее проверять регуляркой наличие "ненужных" символов, и например, выводить сообщение

/[a-z0-9!@#$%^&*\(\)_\+]/i

createEl это js функция для генерации html элемента

winser, могли бы и показать эту функцию.
но раз не показываете, я пофантазирую

let button = createEl('button', {
  html: `Web <span>example</span>`,
});

А может быть так

let span = createEl('span',  { text: `Web example` });
span['style'] = `font-weight: 700;`;

let button = createEl('button', {
  text: `Web`,
  children: [ span ],
});

А может быть и так

let button = createEl('button');
button['innerHtml'] = `Web <span>example</span>`;

В общем, вся суть сводится к тому, чтобы внутри разместить html элемент и сделать его шрифт жирным отдельно.