javascript - 阻止输入类型 date null 时更改边框颜色和消息 html 验证

Question

我想问一下，输入类型date为null，表单无法提交怎么办？

我试过使用 html5 验证，我想用 js 更改颜色字段边框和错误消息，但它不起作用。

这是html代码

<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>

这是验证输入和更改颜色边框的 js 函数

$('.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();
    }

}

这是css错误代码

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

有什么建议吗？

谢谢

标签： javascripthtml