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

1260 rakken

संपादक में खोलें अपना कोड प्रकाशित करें क्या आपको एक वेबसाइट चाहिए?

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

अनुशंसित

23 November 2024

सोशल मीडिया बटन हॉवरिंग

26 March 2025

jQuery और CSS3 का उपयोग करके प्रगति पट्टी के साथ बहु-चरणीय फ़ॉर्म

5 July 2025

एनिमेटेड बॉर्डर और पासवर्ड रीसेट के साथ आधुनिक लॉगिन पैनल TheDoc से

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

अनुशंसित

सोशल मीडिया बटन हॉवरिंग

jQuery और CSS3 का उपयोग करके प्रगति पट्टी के साथ बहु-चरणीय फ़ॉर्म

एनिमेटेड बॉर्डर और पासवर्ड रीसेट के साथ आधुनिक लॉगिन पैनल TheDoc से

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS