How to display two different error messages using ".is-invalid" for two different conditions in the same div?

Viewed 36

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

0 Answers
Related