सत्यापन के साथ प्रोफ़ाइल डेटा जोड़ने के लिए जोड़ें बटन खोलें

1123 rakken

संपादक में खोलें अपना कोड प्रकाशित करें

सत्यापन के साथ प्रोफ़ाइल डेटा जोड़ने के लिए जोड़ें बटन खोलें

अनुशंसित

16 January 2025

F1 ड्राइवर्स 2024 - अंगूठे के साथ गोलाकार गैलरी

8 September 2024

वेबसाइट के लिए Сhatbot

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Password Toggle with Validation</title>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

</head>

<div class="text-center mb-4">
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addUserModal">
                Add User
            </button>
        </div>

<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

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');
            }
        });

अनुशंसित

F1 ड्राइवर्स 2024 - अंगूठे के साथ गोलाकार गैलरी

सीएसएस केवल अनंत मार्की

वेबसाइट के लिए Сhatbot

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS