JSFiddle - React, Tailwind, and code Playground

by kairavthakar2016

HTML

<form action="#" name="reg" class="form form_signup" method="post">
                <h3 class="form__title"> Регистрация </h3>
                <p>
                    <input type="text" id="name" name="name" class="form__input" placeholder="ФИО">
                </p>
                <p>
                    <input type="text" id="phone" name="phone" class="form__input" placeholder="Телефон">
                </p>
                <p>
                    <input type="password" id="password" name="password" class="form__input" id="password_registration" placeholder="Пароль">
                </p>
                <p class="password-length">Пароль слишком короткий</p>
                <p class="password-includes">В пароли есть недопустимые символы: .@$!%*#?&><)(^-_< /p>
                <p>
                    <input type="password" class="form__input" id="second_password_registration" placeholder="Подтвердите пороль">
                </p>
                <p class="check-similar">Пароли не совпадают</p>
                <p>
                    <button class="form__btn form__btn_signup" onclick="event.preventDefault()">Зарегистрироваться</button>
                </p>
            </form>

JavaScript

const jsonName = document.getElementById('name')
const jsonPhone = document.getElementById('phone')
const jsonPassword = document.getElementById('password')
let data = {
    'name': jsonName.value,
    'phone': jsonPhone.value,
    'password': jsonPassword.value
}
if(signUpBtnForm){
    signUpBtnForm.addEventListener('click', function () {
    event.preventDefault();
    let xhr = new XMLHttpRequest();
    let json = JSON.stringify(data);
    xhr.open("POST", "http://localhost:8080/users");
    xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');
    xhr.send(json);
    xhr.onload = () => alert(xhr.response);
    return false;
})
}