使用Javascript为输入字段添加边框样式颜色(提交时没有值)，该字段已经在css中带有！important标签的边

Question

我已经在下面使用脚本了，但可以在CSS中覆盖！important。

<script>
    var forms = document.getElementsByTagName('form');
    for (var i = 0; i < forms.length; i++) {
        forms[i].noValidate = true;
        forms[i].addEventListener('submit', function(event) {
            //Prevent submission if checkValidity on the form returns false.
            if (!event.target.checkValidity()) {
                event.preventDefault();
                //Implement you own means of displaying error messages to the user here.
                document.getElementById("first_name").style.border ="1px solid red";
            }
        }, false);
    }
</script>
<form action="" method="post" target="_top">
  <input type="text" name="first_name" id="first_name" value="" style="width:100px;height: 25px !important;" placeholder="Name" required >
</form>

以及为什么如果输入字段中没有设置值，请单击提交按钮时我想要边框颜色，因为 Safari 不支持必需属性......如果有人可以帮助我，请帮助我克服边界属性解决方案或所需属性的替代解决方案，这些解决方案也可以在 safari 浏览器上运行。

注意：- 不得以任何方式使用 JQuery。

Answer 1

        <script>
        var forms = document.getElementsByTagName('form');
        for (var i = 0; i < forms.length; i++) {
            forms[i].noValidate = true;
            forms[i].addEventListener('submit', function(event) {
                //Prevent submission if checkValidity on the form returns false.
                if (!event.target.checkValidity()) {
                    event.preventDefault();
                    //Implement you own means of displaying error messages to the user here.
                    $('.first_name').attr('style', 'width: 100px;height: 25px !important;border:1px solid red !important;');
                }
            }, false);
        }
    </script>

注意：- 它将删除所有内联样式设置并添加新的脚本中的样式设置