Schaltfläche „Hinzufügen“ zum Öffnen des Hinzufügens von Profildaten mit Validierung

Im Editor öffnen Video Veröffentlichen Sie Ihren Code

Empfohlen

20 December 2024

Ein Code von robustvariable23

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

Schaltfläche „Hinzufügen“ zum Öffnen des Hinzufügens von Profildaten mit Validierung

Empfohlen

Ein Code von staticclass394

Ein Code von Mete

Ein Code von robustvariable23

HTML

CSS

JS

Empfohlen

Ein Code von staticclass394

Ein Code von Mete

Ein Code von robustvariable23

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS