A Code by smartfunction263

Open In Editor Publish Your Code

<div class="modal fade" id="addUserModal" tabindex="-1" aria-labelledby="addUserModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="addUserModalLabel">Add User</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form id="addUserForm" novalidate>
                        <div class="modal-body">
                            <p class="text-danger">All star(*) marked fields are mandatory</p>
                            <div id="alertContainer"></div>

<div class="mb-3">
                                <label for="userFirstname" class="form-label">First Name <b class="text-danger">*</b></label>
                                <input type="text" class="form-control" placeholder="First Name" id="userFirstname" required>
                                <div class="invalid-feedback">
                                    First Name is required.
                                </div>
                            </div>

<div class="mb-3">
                                <label for="userLastname" class="form-label">Last Name <b class="text-danger">*</b></label>
                                <input type="text" class="form-control" placeholder="Last Name" id="userLastname" required>
                                <div class="invalid-feedback">
                                    Last Name is required.
                                </div>
                            </div>

<div class="mb-3">
                                <label for="userUsername" class="form-label">Username <b class="text-danger">*</b></label>
                                <input type="text" class="form-control" placeholder="Username" id="userUsername" required>
                                <div class="invalid-feedback">
                                    Username is required.
                                </div>
                            </div>

<div class="mb-3">
                                <label for="userEmail" class="form-label">Email <b class="text-danger">*</b></label>
                                <input type="email" class="form-control" placeholder="Email" id="userEmail" required>
                                <div class="invalid-feedback">
                                    Please enter a valid email address.
                                </div>
                            </div>

<div class="mb-3">
                                <label for="userContact">Contact <b class="text-danger">*</b></label>
                                <div class="input-group">
                                    <span class="input-group-text">+91</span>
                                    <input type="text" class="form-control" placeholder="Enter your 10-digit number" id="userContact" maxlength="10" pattern="\d{10}" required>
                                    <div class="invalid-feedback">
                                        Please enter a valid 10-digit contact number.
                                    </div>
                                </div>
                            </div>

<div class="mb-3">
                                <label for="userPassword" class="form-label">Password <b class="text-danger">*</b></label>
                                <div class="input-group">
                                    <input type="password" class="form-control" placeholder="Password" id="userPassword" pattern=".{8,}" required>
                                    <span class="input-group-text" onclick="togglePassword()">
                                        <i class="fa fa-eye" id="toggleEye"></i>
                                    </span>
                                    <div class="invalid-feedback">
                                        Password must be at least 8 characters long.
                                    </div>
                                </div>
                            </div>

<div class="mb-3">
                                <label for="userRole">Role <b class="text-danger">*</b></label>
                                <select class="form-select" id="userRole" required>
                                    <option value="" disabled selected>Select Role</option>
                                    <option>Admin</option>
                                    <option>Editor</option>
                                    <option>Viewer</option>
                                </select>
                                <div class="invalid-feedback">
                                    Please select a role.
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary">Add User</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

</body>

</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-attachment: fixed;
}

.login-container {
    width: 100%;
    max-width: 380px;
    background-color: white;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    padding: 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin: 20px;
}

.login-container::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, #5d3fd3, transparent);
    animation: rotate 4s linear infinite;
    z-index: 1;
}

.login-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    margin: 5px;
    border-radius: 15px;
    z-index: 2;
}

.login-content {
    position: relative;
    z-index: 3;
}

.login-logo {
    font-size: 2.5rem;
    font-weight: bold;
    color: #5d3fd3;
    margin-bottom: 30px;
}

.input-group {
    margin-bottom: 20px;
}

.input-group input {
    width: 100%;
    padding: 12px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    outline: none;
    transition: all 0.3s ease;
}

.input-group input:focus {
    border-color: #5d3fd3;
    box-shadow: 0 0 10px rgba(93,63,211,0.2);
}

.login-btn {
    width: 100%;
    padding: 12px;
    background-color: #5d3fd3;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.login-btn:hover {
    background-color: #4a32a8;
    transform: translateY(-3px);
}

.error-message {
    color: #ff4757;
    margin-bottom: 15px;
    display: none;
}

.social-login {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.social-btn {
    width: 45%;
    padding: 10px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: bold;
    transition: transform 0.3s ease;
}

.social-btn:hover {
    transform: scale(1.05);
}

.google-btn {
    background-color: #fff;
    border: 1px solid #ddd;
    color: #333;
}

.facebook-btn {
    background-color: #3b5998;
    color: white;
}

@media (max-width: 480px) {
    .login-container {
        width: 90%;
        padding: 20px;
    }

.login-logo {
        font-size: 2rem;
    }

.social-login {
        flex-direction: column;
    }

.social-btn {
        width: 100%;
        margin-bottom: 10px;
    }
}

@keyframes rotate {
    0% { 
        transform: rotate(0deg); 
    }
    100% { 
        transform: rotate(360deg); 
    }
}

JS

function togglePassword() {
            const passwordField = document.getElementById("userPassword");
            const toggleEye = document.getElementById("toggleEye");

if (passwordField.type === "password") {
                passwordField.type = "text";
                toggleEye.classList.remove("fa-eye");
                toggleEye.classList.add("fa-eye-slash");
            } else {
                passwordField.type = "password";
                toggleEye.classList.remove("fa-eye-slash");
                toggleEye.classList.add("fa-eye");
            }
        }

// Custom form validation
        (function () {
            'use strict'

const forms = document.querySelectorAll('.needs-validation')

Array.prototype.slice.call(forms)
                .forEach(function (form) {
                    form.addEventListener('submit', function (event) {
                        if (!form.checkValidity()) {
                            event.preventDefault()
                            event.stopPropagation()
                        }

form.classList.add('was-validated')
                    }, false)
                })
        })();

// Form validation using Bootstrap 5
        document.getElementById('addUserForm').addEventListener('submit', function (event) {
            event.preventDefault(); // Prevent form submission

// Check if form is valid
            if (!this.checkValidity()) {
                event.stopPropagation();
                this.classList.add('was-validated');
            } else {
                alert('User added successfully!');
                // You can add code here to send data to the server or further process the form
                this.reset(); // Reset the form
                this.classList.remove('was-validated');
            }
        });

A Code by smartfunction263

Recommended

HTML CSS Event Registration System Website

Glitch Text Animation

changing light

HTML

CSS

JS

Recommended

HTML CSS Event Registration System Website

Glitch Text Animation

changing light

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS