jQuery addClass example

Change class name on click in jQuery

by Chuck Tornton

HTML

<div class="wrapper">
    <div class="loginBlock">
        <form class="loginForm">
            <h1>Routing Login</h1>
            <label hidden for="userLogin">Login:</label>
            <input type="text" id="userLogin" placeholder="Логин вида: rua***">
            <label hidden for="userPass1">Password:</label>
            <input type="text" id="userPass1" placeholder="Пароль (как в windows)">
            <button type="submit" id="submitButton" onclick="return loginForm()">Отправить</button>
        </form>
    </div>
</div>

CSS

html, body {
    height: 100%;
    width: 100%;
    background: #000;
    margin: 0;
}

.wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(to left bottom, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
}

.loginBlock {
    display: flex;
    flex-direction: column;
    width: 400px;
    height: 530px;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    background: #00000024;
    border: 1px solid #0000004d;
}

.loginForm {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: none;
}

#userLogin {
    margin-bottom: 20px;
    width: 250px;
    height: 30px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    padding-left: 10px;
}

#userMail {
    margin-bottom: 20px;
    width: 250px;
    height: 30px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    padding-left: 10px;
}

#userPass1 {
    margin-bottom: 20px;
    width: 250px;
    height: 30px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    padding-left: 10px;
}

#userPass2 {
    margin-bottom: 20px;
    width: 250px;
    height: 30px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    padding-left: 10px;
}

#submitButton {
    width: 265px;
    height: 30px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    background: #03A9F4;
    border: none;
    outline: none;
}

JavaScript

"use strict";

function loginForm() {

    let userLogin = document.getElementById('userLogin');
    let userLoginLength = userLogin.value.length >= 5 && userLogin.value.length <= 8;

    let userLoginCorrect = userLogin.value.includes('rua') || userLogin.value.includes('ost');
    let userLoginNotMail = userLogin.value.includes('@');

    if (userLoginLength) {
    } else {
        alert('Длина логина неверна');
        return false;
    }

    if (userLoginCorrect) {
    } else {
        alert('Ваш логин должен быть rua* или ost*');
        return false;
    }

    if (!userLoginNotMail) {
    } else {
        alert('Email вводить не нужно :)');
        return false;
    }

}
loginForm();