Untitled

avatar
unknown
plain_text
a year ago
16 kB
9
Indexable
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LG Science Park</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="lib/js/jquery-3.4.1.js"></script>
    <script src="js/index.js"></script>
</head>
<body>
    <div class="login-content">
        <div class="img">
            <img src="img/main.png">
        </div>
        <div class="login-wrap">
            <h1>Login</h1>
            <p class="sub-title">Please login to your account.</p>
            <form id="login-form">
                <div class="input-group">
                    <label for="login-id">ID</label>
                    <input type="text" id="login-id" placeholder="Please enter login ID." required>
                </div>
				<span class="error-icon" id="id-error-icon"></span>
				<span class="error-message" id="id-error-message"></span>
                <div class="input-group">
                    <label for="login-password">Password</label>
                    <input type="password" id="login-password" placeholder="Please enter login password." required>
                </div>
				<span class="error-icon" id="id-error-icon"></span>
				<span class="error-message" id="id-error-message"></span>
                <button type="submit" id="login-button">Login</button>
                <div class="link-group">
                    <p>New User?</p>
                    <a href="register.html">Registration</a>
                </div>
            </form>
            <div id="error-message" style="display:none;">
                The login ID / password format is not valid.
            </div>
        </div>
    </div>
</body>
</html>
-----------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Registration</title>
    <link rel="stylesheet" href="css/register.css">
    <script src="lib/js/jquery-3.4.1.js"></script>
    <script src="js/index.js"></script>
</head>
<body>
    <div class="register-content">
        <div class="register-wrap">
            <h1>Registration</h1>
            <p class="sub-title">Please create your account.</p>
            <form id="register-form">
                <div class="input-group">
                    <label for="employee-id">Employee ID</label>
                    <input type="text" id="employee-id" placeholder="Enter employee number (5 digits)." required>
                </div>
                <span class="error"></span>
                <div class="input-group">
                    <label for="user-name">User Name</label>
                    <input type="text" id="user-name" placeholder="Enter name." required>
                </div>
                <span class="error"></span>
                <div class="input-group">
                    <label for="password">Password</label>
                    <input type="password" id="password" placeholder="Enter password (English + numeric mix 8 digits or more)" required>
                </div>
                <span class="error"></span>
                <div class="input-group email-group">
                    <label for="email">E-mail</label>
                    <div class="email-inputs">
                        <input type="email" id="email" placeholder="Enter email address" required>
                        <select id="email-domain" required>
                            <option value="">Select email domain</option>
                            <option value="gmail.com">gmail.com</option>
                            <option value="yahoo.com">yahoo.com</option>
                            <option value="outlook.com">outlook.com</option>
                        </select>
                    </div>
                    <span class="error"></span>
                </div>                
                <div class="input-group">
                    <label for="team-name">Team Name</label>
                    <input type="text" id="team-name" placeholder="Enter team name." required>
                </div>
                <span class="error"></span>
                <div class="input-group">
                    <label for="company-address">Company Address</label>
                    <input type="text" id="company-address" placeholder="Enter company address." required>
                </div>
                <span class="error"></span>
                <button type="submit" id="register-button">Registration</button>
                <button type="button" id="cancel-button">Cancel</button>
            </form>
        </div>
    </div>
</body>
</html>
-----------
register css
body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F2F2F2;
    margin: 0;
    font-family: Arial, sans-serif;
}

h1, p {
    margin: 0;
}

.register-content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 600px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 40px 20px;
}

.register-wrap {
    width: 100%;
}

h1 {
    color: black;
    font-size: 24px;
    margin-bottom: 10px;
}

.sub-title {
    color: #46515C;
    font-size: 16px;
    margin-bottom: 20px;
}

.input-group.email-group {
    display: flex;
    flex-direction: column;
}

.email-inputs {
    display: flex;
    gap: 10px; /* Khoảng cách giữa input và select */
    margin-top: 5px;
}

.email-inputs input {
    flex: 2;
    height: 40px;
    padding-left: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

.email-inputs select {
    flex: 1;
    height: 40px;
    padding-left: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

.input-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.input-group label {
    font-size: 14px;
    color: #46515C;
    margin-bottom: 5px;
    font-weight: bold;
}

.input-group input, .input-group select {
    height: 40px;
    font-size: 14px;
    border: 1px solid #949494;
    border-radius: 4px;
    padding-left: 10px;
}

input[type="email"] {
    width: calc(70% - 5px);
    float: left;
    margin-right: 5px;
}

select {
    width: calc(30% - 5px);
    float: right;
}

button {
    width: 100%;
    height: 48px;
    background: #F24976;
    border-radius: 5px;
    border: none;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    margin-bottom: 10px;
}

#cancel-button {
    background: #ffffff;
    color: #F24976;
    border: 1px solid #F24976;
}

button:hover {
    opacity: 0.8;
}

.error-icon {
    display: none;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: red;
    font-weight: bold;
}
------
login css
body {
    height: 100vh;
    display: flex;
    align-items: center;
    background-color: #F2F2F2;
    margin: 0;
    font-family: Arial, sans-serif;
}

h1, p {
    margin: 0;
}

.login-content {
    width: 1443px;
    height: 718px;
    display: flex;
    margin: auto;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 5px 5px 5px 5px rgb(206, 206, 206);
}

.login-content .img {
    width: 752px;
    height: 718px;
    background: url('../img/main.png') no-repeat center;
    background-size: cover;
    border-radius: 10px 0 0 10px;
}

h1 {
    color: black;
    font-size: 36px;
    letter-spacing: -0.2px;
}

.login-wrap {
    display: flex;
    flex-direction: column;
    margin-left: 77px;
    justify-content: center;
}

.login-wrap .sub-title {
    color: #46515C;
    font-size: 20px;
    margin-bottom: 20px;
}

.input-group {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.input-group label {
    font-size: 16px;
    color: #46515C;
    margin-bottom: 5px;
    font-weight: bold;
}

.login-wrap input {
    width: 404px;
    height: 40px;
    font-size: 16px;
    border: 1px solid #949494;
    border-radius: 4px;
    padding-left: 10px;
}

.anonymous {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #b5a5a5;
    font-size: 14px;
}

.login-wrap button {
    width: 404px;
    height: 48px;
    margin-top: 42px;
    background: #F24976;
    border-radius: 5px;
    border: none;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    cursor: pointer;
}

.login-wrap .link-group {
    display: flex;
    gap: 8px;
    margin-top: 20px;
}

.login-wrap .link-group p {
    color: #46515C;
    font-weight: 500;
    font-size: 16px;
}

.login-wrap .link-group a {
    color: #F24976;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
}

#error-message {
    margin-top: 20px;
    color: red;
    font-weight: bold;
}

.error {
    color: red;
    font-size: 12px;
    margin-top: 5px;
    display: block;
}

.error-message {
    display: none;
    color: red;
    font-size: 12px;
    margin-top: 5px;
}

.input-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}

.input-group input.error {
    border-color: red;
}

.error-icon {
    display: none;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: red;
    font-weight: bold;
}

.error-message {
    display: none;
    color: red;
    font-size: 12px;
    margin-top: 5px;
}

.input-group input.error + .error-icon {
    display: inline;
}

.input-group input.error + .error-icon + .error-message {
    display: block;
}
----
$(document).ready(function() {

    // Logic cho trang login.html
    if ($('#login-form').length) {
        // Validate ID on keyup
        $('#login-id').on('keyup', function() {
            var loginId = $(this).val();
            if (!/^\d{5}$/.test(loginId)) {
                $(this).addClass('error');
                $('#id-error-icon').show();
                $('#id-error-message').text('ID must be a 5-digit number.').show();
            } else {
                $(this).removeClass('error');
                $('#id-error-icon').hide();
                $('#id-error-message').hide();
            }
        });

        // Validate Password on keyup
        $('#login-password').on('keyup', function() {
            var password = $(this).val();
            if (!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/.test(password)) {
                $(this).addClass('error');
                $('#password-error-icon').show();
                $('#password-error-message').text('Password must be at least 8 characters long and contain both letters and numbers.').show();
            } else {
                $(this).removeClass('error');
                $('#password-error-icon').hide();
                $('#password-error-message').hide();
            }
        });

        // Form submission validation
        $('#login-form').submit(function(event) {
            event.preventDefault();

            var loginId = $('#login-id').val();
            var password = $('#login-password').val();

            if (/^\d{5}$/.test(loginId) && /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/.test(password)) {
                alert('Login successful!');
                // Xử lý logic đăng nhập tại đây
            } else {
                alert('Please correct the errors before submitting the form.');
            }
        });
    }


    // Logic cho trang register.html
    if ($('#register-form').length) {
        // Validate Employee ID on keyup
        $('#employee-id').on('keyup', function() {
            var employeeId = $(this).val();
            if (!/^\d{5}$/.test(employeeId)) {
                $(this).next('.error').text('Employee ID must be a 5-digit number.');
            } else {
                $(this).next('.error').text('');
            }
        });

        // Validate User Name on keyup
        $('#user-name').on('keyup', function() {
            var userName = $(this).val();
            if (userName.trim() === '') {
                $(this).next('.error').text('User Name is required.');
            } else {
                $(this).next('.error').text('');
            }
        });

        // Validate Password on keyup
        $('#password').on('keyup', function() {
            var password = $(this).val();
            if (!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/.test(password)) {
                $(this).next('.error').text('Password must be at least 8 characters long and contain both letters and numbers.');
            } else {
                $(this).next('.error').text('');
            }
        });

        // Validate Email on keyup
        $('#email').on('keyup', function() {
            var email = $(this).val();
            if (!/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(email)) {
                $(this).next('.error').text('Please enter a valid email address.');
            } else {
                $(this).next('.error').text('');
            }
        });

        // Validate Email Domain on change
        $('#email-domain').on('change', function() {
            var emailDomain = $(this).val();
            if (emailDomain === '') {
                $(this).next('.error').text('Please select an email domain.');
            } else {
                $(this).next('.error').text('');
            }
        });

        // Validate Team Name on keyup
        $('#team-name').on('keyup', function() {
            var teamName = $(this).val();
            if (teamName.trim() === '') {
                $(this).next('.error').text('Team Name is required.');
            } else {
                $(this).next('.error').text('');
            }
        });

        // Validate Company Address on keyup
        $('#company-address').on('keyup', function() {
            var companyAddress = $(this).val();
            if (companyAddress.trim() === '') {
                $(this).next('.error').text('Company Address is required.');
            } else {
                $(this).next('.error').text('');
            }
        });

        // Form submission validation
        $('#register-form').submit(function(event) {
            event.preventDefault();

            var employeeId = $('#employee-id').val();
            var userName = $('#user-name').val();
            var password = $('#password').val();
            var email = $('#email').val();
            var emailDomain = $('#email-domain').val();
            var teamName = $('#team-name').val();
            var companyAddress = $('#company-address').val();

            if (
                /^\d{5}$/.test(employeeId) &&
                userName.trim() !== '' &&
                /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/.test(password) &&
                /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(email) &&
                emailDomain !== '' &&
                teamName.trim() !== '' &&
                companyAddress.trim() !== ''
            ) {
                alert('Registration successful!');
                // Xử lý logic đăng ký tại đây
            } else {
                alert('Please correct the errors before submitting the form.');
            }
        });

        $('#cancel-button').click(function() {
			window.location.href = 'index.html';
		});
    }
});
Editor is loading...
Leave a Comment