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

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

अनुशंसित

8 February 2025

कॉमिक बटन

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

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

अनुशंसित

बटन होवर

कॉल एक्शन बटन होवर प्रभाव

कॉमिक बटन

HTML

CSS

JS

अनुशंसित

बटन होवर

कॉल एक्शन बटन होवर प्रभाव

कॉमिक बटन

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS