'Best way to remove the div area/spacing when using dismissible bootstrap alerts?
I've built a form on which I'm dynamically showing alerts(success and failure) based on if the data entered in the form is valid or invalid.
The problem I'm trying to fix is to remove the div/spacing at the initial instance when the form is loaded, or reloaded at a later point.
The spacing gets removed upon success and failure alerts , but once you reload the page, the spacing comes up . I want this empty space to be removed.
Can someone suggest me the easiest way to fix this using Bootstrap?
Here is my JS and HTML:
//fetching the element objects for which we want to perform manual validation
const userName = document.getElementById("name");
const userEmail = document.getElementById("email");
const pickupDate = document.getElementById("pickupDate");
const dropDate = document.getElementById("dropDate");
const phoneNumber = document.getElementById("phoneNumber");
let validName = false;
let validEmail = false;
let validpickupDate = false;
let validdropDate = false;
//validation for userName
userName.addEventListener("blur", () => {
let regName = /^[a-zA-Z]{2,30}$/; //starts with a-z orA-Z and no of characters b/w 2-30
if (regName.test(userName.value)) {
userName.classList.remove("is-invalid");
validName = true;
}
else {
userName.classList.add("is-invalid"); //adding "is-invalid" class to the userName field
validName = false;
}
})
//validation for userEmail
userEmail.addEventListener("blur", () => {
let regEmail = /^([_\-\.0-9a-zA-Z]+)@([_\-\.0-9a-zA-Z]+)\.([a-zA-Z]){2,7}$/;
if (regEmail.test(userEmail.value)) {
userEmail.classList.remove("is-invalid");
validEmail = true;
}
else {
userEmail.classList.add("is-invalid"); //adding "is-invalid" class to the userEmail field
validEmail = false;
}
})
//validation for pickupDate
pickupDate.addEventListener("blur", () => {
let todayDate = new Date(); //fetching today's date
let pickupDateObj = new Date(pickupDate.value); //converting the pickup date to date object since its a string
let dropDateObj = new Date(dropDate.value);
console.log(dropDate.value);
if (dropDate.value) {
if (pickupDateObj > todayDate) {
if (pickupDateObj > dropDateObj) {
alert("Enter a pickup date which is before drop date");
validpickupDate = false;
}
else {
pickupDate.classList.remove("is-invalid");
validpickupDate = true;
}
}
else {
pickupDate.classList.add("is-invalid");
validpickupDate = false;
}
}
else {
if (pickupDateObj > todayDate) {
pickupDate.classList.remove("is-invalid");
validpickupDate = true;
}
else {
pickupDate.classList.add("is-invalid");
validpickupDate = false;
}
}
})
//validation for pickupDate
dropDate.addEventListener("blur", () => {
let dropDateObj = new Date(dropDate.value);
console.log(dropDateObj);
if (pickupDate.value) {
console.log(pickupDate.value);
let pickupDateObj = new Date(pickupDate.value);
console.log(pickupDateObj);
if (dropDateObj > pickupDateObj) {
console.log(true)
dropDate.classList.remove("is-invalid");
validdropDate = true;
}
else {
console.log(false)
dropDate.classList.add("is-invalid");
validpickupDate = false;
}
}
else {
alert("Enter pickup date first");
validpickupDate = false;
}
})
let submit = document.getElementById("submit");
submit.addEventListener('click', (e) => {
e.preventDefault();
console.log("clicked");
if(validEmail && validName && validpickupDate && validdropDate){
let success = document.getElementById("success");
success.classList.add("show");
$('#failure').hide();
$('#success').show();
}
else{
let failure = document.getElementById("failure");
failure.classList.add("show");
$('#success').hide();
$('#failure').show();
}
})<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FormValidation</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div id="success" class="alert alert-success alert-dismissible fade" role="alert">
<strong>Success!</strong> Your form has been submitted successfully.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div id="failure" class="alert alert-danger alert-dismissible fade" role="alert">
<strong>Failure!</strong> Your form contains invalid data or data is missing
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="container my-2">
<h1>Car Rental Agency</h1>
<form>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter your name">
<div class="invalid-feedback">
Invalid user name
</div>
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="text" class="form-control" id="email" placeholder="[email protected]">
<div class="invalid-feedback">
Invalid Email Id
</div>
</div>
<div class="form-group">
<label for="carSelect">Select Car</label>
<select class="form-control" id="carSelect">
<option>BMW i8</option>
<option>Audi A4</option>
<option>Porsche Cayenne</option>
<option>Rolls Royce Ghost</option>
</select>
</div>
<div class="form-group">
<label for="date">Select pickup date</label>
<input type="date" class="form-control" id="pickupDate">
<div class="invalid-feedback">
Pickup date must be after today's date
</div>
<div class="valid-feedback" style="color:red">
Pickup date must be before drop date
</div>
</div>
<div class="form-group">
<label for="date">Select drop date</label>
<input type="date" class="form-control" id="dropDate">
<div class="invalid-feedback">
Drop date must be after pickup date
</div>
</div>
<div class="form-group">
<label for="license">Enter driving license number</label>
<input type="text" class="form-control" id="license">
</div>
<div class="form-group">
<label for="phoneNumber">Enter your phone number</label>
<input type="text" class="form-control" id="phoneNumber">
</div>
<button class="btn btn-primary" id="submit">Submit</button>
</form>
</div>
<script src="form.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>
</html>Solution 1:[1]
I added a position absolute property so that I could move is wherever I wanted CodepenLink
Solution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FormValidation</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div id="success" class="alert alert-success alert-dismissible fade" role="alert">
<strong>Success!</strong> Your form has been submitted successfully.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div id="failure" class="alert alert-danger alert-dismissible fade" role="alert">
<strong>Failure!</strong> Your form contains invalid data or data is missing
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="container my-2 mx-auto" style="position: absolute; top:0; left:25%; right:25%;">
<h1>Car Rental Agency</h1>
<form >
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter your name">
<div class="invalid-feedback">
Invalid user name
</div>
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="text" class="form-control" id="email" placeholder="[email protected]">
<div class="invalid-feedback">
Invalid Email Id
</div>
</div>
<div class="form-group">
<label for="carSelect">Select Car</label>
<select class="form-control" id="carSelect">
<option>BMW i8</option>
<option>Audi A4</option>
<option>Porsche Cayenne</option>
<option>Rolls Royce Ghost</option>
</select>
</div>
<div class="form-group">
<label for="date">Select pickup date</label>
<input type="date" class="form-control" id="pickupDate">
<div class="invalid-feedback">
Pickup date must be after today's date
</div>
<div class="valid-feedback" style="color:red">
Pickup date must be before drop date
</div>
</div>
<div class="form-group">
<label for="date">Select drop date</label>
<input type="date" class="form-control" id="dropDate">
<div class="invalid-feedback">
Drop date must be after pickup date
</div>
</div>
<div class="form-group">
<label for="license">Enter driving license number</label>
<input type="text" class="form-control" id="license">
</div>
<div class="form-group">
<label for="phoneNumber">Enter your phone number</label>
<input type="text" class="form-control" id="phoneNumber">
</div>
<button class="btn btn-primary" id="submit">Submit</button>
</form>
</div>
<script src="form.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>
</html>
Solution 2:[2]
You just need to combine the two strings, also known as concatenation
Class = input("What class is " + Name)
A format string would probably be easier to read though
Class = input(f"What class is {Name}")
I suspect the reason why you tried what you did is because it's possible to pass multiple arguments to the print function. This mostly only works for print. It won't work for most of Python's built-in functions.
By the way, while you're here, variable names usually start with lowercase letters. It will work either way, but it looks nice when the variable names are consistent.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | James Z |
| Solution 2 | Botahamec |