Change border color and message html validation when prevent input type date null

I want to ask, how to make input type date when it's null, the form can not submitted.

I've tried using html5 validation, and I want to change the color field border and error message using js, but it's not working.

Here's the html code

<label class="col-sm-2 col-form-label margin-up">Born Date *</label>
   <div class="col-md-4">
      <input type="date" class="form-control" value="<?php echo $user->born_date ?>" name="born_date" id="born_date" oninput="test_date(this.value);" required>
      <small class="date_born" style="color: red">Date must be filled</i></small>
   </div>

Here's the js function to validate input and change color border

$('.date_born').hide();
function test_date()
{
    var date1= document.getElementById("born_date").value;
    
    if(date1=='')
    {
        $('#born_date').addClass('err');
        $('.date_born').show();
        document.getElementById("born_date").value='';
    }
    else if(date1!="")
    {
        $('#born_date').removeClass('err');
        $('.date_born').hide();
    }

}

Here's the css error code

.err{
  border-color: red;
  border: solid 2px red;
  height: calc(1.5em + .95rem + 2px);
}

Any suggestion ?

Thank you