I'm working on a Car Rental agency form. I'm using bootstrap's "invalid-feedback" class to display the error message below the user input fields where I need to do validation , and I'm populating the same class using classList.add("is-invalid") through my JS whenever the condition doesn't match. I've included two different div classes "invalid-feedback" and "valid-feedback" onto my pickup date field in my html code. I've managed to solve the problem by using "valid-feedback" and using inline css styling to show the error in red color , but there is a green "tick" which appears on the right. [![enter image description here][1]][1]
I'm looking for an easier way to solve this problem.
How can I display two different error messages under the same div for two different conditions/logic ?
Here's the logic for "Select Pickup date"
if(dropdate is already filled)
{
if(pickupdate is greater than today's date)
{
if(pickupdate is smaller than drop date)
{
show No error message
}
else{
show an error message "pickup date must be before drop date"
}
else{
show an error message "pickup date must be before today's date"
}
}
else
{
if(pickup date greater than today's date)
{
show an error message -pickup date must be before today's date
}
else{
show no error message
}
}
Here's my html for pickup date and drop date :
<div class="container my-3">
<h1>Car Rental Agency</h1>
<form>
<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>
Here's my JS validations for pickup date and Drop date :
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){
pickupDate.classList.remove("is-valid");
}
else{
pickupDate.classList.add("is-valid");
}
}
else{
pickupDate.classList.add("is-invalid");
pickupDate.classList.remove("is-valid");
}
}
else{
if(pickupDateObj>todayDate){
pickupDate.classList.remove("is-invalid");
}
else{
pickupDate.classList.add("is-invalid");
}
}
})
//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");
}
else{
console.log(false)
dropDate.classList.add("is-invalid");
}
}
else{
alert("Enter pickup date first");
}
})