Как лучше обыграть валидацию форм, если на странице 2 формы?

Question

[yavaskript]

Существует страница с двумя формами - входа и регистрации. Формы находятся на разных сторонах переворачиваемой карточки. (подробнее: на одной стороне карточки - которая прорисовывается при загрузке страницы - форма входа. А на другой стороне карточки - форма регистрации. Если не зарегистрирован, нажимаешь кнопку "зарегистрироваться", и карточка переворачивается)
Так вот, я использую wtforms и встроенные валидаторы. Но проблема в том, что, если вместо e-mail ввести абракадабру, то форма не проходит валидацию. И страница перезагружается, добавляя примечания к input'ам, которые содержат неправильные данные. В моем случае получается не очень удобно для пользователя. А именно. Пользователь неправильно заполнил форму регистрации (которая на другой стороне карточки) -> страница перезагружается -> пользователю показывается сторона карточки с формой входа. А хотелось бы, чтобы карточка была обращена к пользователю той стороной, которую он заполнял.
Но я не могу придумать, как это сделать. Как запомнить положение карточки до перезагрузки страницы? Или может быть, как-то запустить скрипт, который переворачивает карточку автоматически при перезагрузке, если сабмит исходит от формы регистрации? Но как это сделать? Если нужен код - приложу

Comments

[Антон]

Как запомнить положение карточки до перезагрузки страницы?

Локалсторейдж
Сессионсторейдж
Куки

Да что угодно, что может хранить инфу.
Исходя из того или иного значения, показывать нужную часть формы

страница перезагружается

А может не надо?)

[ThunderCat]

ajax валидация? Не, не слышал...

[yavaskript]

Антон, а что именно хранить? карточка переворачивается путем добавления/удаления класса card.classList.toggle('is-flipped');

И, может, и не надо. Но, как я понял, wtforms работает именно так

[Антон]

yavaskript, Да что угодно, 0 и 1, серп и молот, огонь и вода, класс в конце концов.
С аяксом разберитесь. Так у вас запрос уходит формой тем же самым GET или POST, а так уйдет равно туда же, только получит ответ без перезагрузки

Answer 1

[iddqda]

во первых валидацию можно написать на js

document.getElementById("myForm").addEventListener('submit', (event) => {        
        const data = new FormData(event.target);
        if(!formValid(data)) {
              event.preventDefault();  // отменяем action формы
              return;
        }
})

а во вторых можно не перегружать страницу
точно так же сделать свой обработчик на submit
в нем fetch post (ajax умер давно)

document.getElementById("myForm").addEventListener('submit', (event) => {             
        const data = new FormData(event.target);
        fetch("/register", {
            method: 'POST',                                            
            body: data
        })
        .then((response) => response.json())
        .then((data) => {
            // тут рисуешь алерты в DOM
        })
        .catch((error) => {            
            console.log(`fetch.post response came up with an error: ${error}`);
        });
        event.preventDefault();
    })

а со стороны фляги

if request.method == 'POST':               
   data = request.form
   ok, err = validateForm(data)
   if not ok:
       return jsonify(err)
   DoRegisterUser(data)
   return redirect(url_for(index))

в третьих если все же хочется оставить валидаторы wtf то просто надо сохранить состояние карточки
для этого при переворачивании карточки добавить/убрать бит в cookie
а при перезагрузке страницы прочитать этот бит и повернуть карточку нужной стороной
https://www.w3schools.com/js/js_cookies.asp

з.ы. может все совсем не так. я не настоящий сварщик (с)

Answer 2

[Александр Черемхин]

Как запомнить положение карточки до перезагрузки страницы?

Cамое простое решение - использовать sessionStorage. Запишите состояние страницы. (какая сторона карточки активна). Тогда Вы можете получить это состояние после перезагрузки и показать нужную сторону.

const stateCard = localStorage.getItem('card');  // получить активную сторону карты
if(stateCard === 'register'){
 // сделать активной регистрацию
} else {
 // сделать активным вход
}
...
function onSubmit(){
   localStorage.setItem('card', 'register'); // установить активную сторону карты
   ....
}

док sessionStorage
https://developer.mozilla.org/ru/docs/Web/API/Wind...