Bootstrap Forms make creating user input areas easy with pre-styled components. They simplify form design from basic text fields to complex layouts, ensuring consistency and mobile-friendly responsiveness for capturing user data effectively.
Approach
- Design a Bootstrap-form structure using HTML with appropriate form elements for first name, last name, email, date of birth, password, re-enter password, contact, and gender.
- Apply Bootstrap classes to form elements, labels, and buttons for a clean and responsive design. Utilize grid classes for proper alignment.
- Implement JavaScript to validate the password, ensuring it contains at least one lowercase letter, one uppercase letter, one number, and one symbol. Validate the re-enter password to match the original.
- Use JavaScript to display an alert upon successful form submission, providing a seamless and interactive user experience.
- Test the form, ensuring all elements are functional and styled correctly.
Example: In this example, we will see the implementation of a Form with the help of bootstrap.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1,
shrink-to-fit=no">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<title>Bootstrap Form</title>
</head>
<body>
<h1 class="text-success text-center">
GeeksforGeeks
</h1>
<div class="container mt-5 ">
<div class="row justify-content-center">
<div class="col-md-6 border border-white">
<form id="registrationForm">
<div class="form-group">
<label for="firstName">
First Name
</label>
<input type="text"
class="form-control"
id="firstName"
placeholder="First Name" required>
</div>
<div class="form-group">
<label for="lastName">
Last Name
</label>
<input type="text"
class="form-control"
id="lastName"
placeholder="Last Name" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email"
class="form-control"
id="email"
placeholder="Email" required>
<span id="email-pass"></span>
</div>
<div class="form-group">
<label for="dob">Date of Birth</label>
<input type="date"
class="form-control"
id="dob" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password"
class="form-control"
id="password"
placeholder="Password" required>
</div>
<div class="form-group">
<label for="rePassword">
Re-enter Password
</label>
<input type="password"
class="form-control"
id="rePassword"
placeholder="Re-enter Password" required>
<span id="pass"></span>
</div>
<div class="form-group">
<label for="contact">Contact</label>
<input type="tel"
class="form-control"
id="contact"
placeholder="Contact"
oninput=
"this.value = this.value.replace(/[^0-9]/g, '').slice(0, 10)"
maxlength="10" required>
</div>
<div class="form-group">
<label for="gender">Gender</label>
<select id="gender" class="form-control">
<option selected>Choose...</option>
<option>Male</option>
<option>Female</option>
<option>Other</option>
</select>
</div>
<button onclick="validateForm(event)"
class="btn btn-primary">
Submit
</button>
</form>
</div>
</div>
</div>
<script src=
"https://code.jquery.com/jquery-3.2.1.slim.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">
</script>
<script>
function validateForm(e) {
e.preventDefault();
let password =
document.getElementById("password").value;
let repassword =
document.getElementById("rePassword").value;
let pass =
document.getElementById("pass");
let emailpass =
document.getElementById("email-pass");
let email =
document.getElementById("email").value;
let emailRegex =
"/^[a-zA-Z0-9][a-zA-Z0-9._%+-]*@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/";
let dob =
document.getElementById("dob").value;
let contact =
document.getElementById("contact").value;
let gender =
document.getElementById("gender").value;
// Flag to track validation
let isValid = true;
if (!emailRegex.test(email)) {
emailpass.innerText =
"Invalid email format. Please enter a valid email.";
setTimeout(() => {
emailpass.innerText = "";
}, 3000);
isValid = false;
} else if (password !== repassword) {
pass.innerText =
"Passwords do not match. Please re-enter.";
setTimeout(() => {
pass.innerText = "";
}, 3000);
isValid = false;
} else if (!dob || !contact || gender === "Choose...") {
alert("Please fill in all required fields.");
isValid = false;
} else {
let passwordRegex = /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9])\S{8,}$/;
if (!passwordRegex.test(password)) {
pass.innerText =
'Password must be at least 8 characters long'+
' and include at least one number, one alphabet,'+
' and one symbol.';
setTimeout(() => {
pass.innerText = "";
}, 3000);
isValid = false;
}
}
if (isValid) {
alert("Form submitted");
document.getElementById("registrationForm").reset();
}
}
</script>
</body>
</html>
Output:
