使用Javascript为输入字段添加边框样式颜色(提交时没有值),该字段在css中已经有边框!重要标签

使用Javascript为输入字段添加边框样式颜色(提交时没有值),该字段在css中已经有边框!重要标签,javascript,Javascript,我已经在使用下面的脚本,但可以覆盖!在CSS中很重要 <script> var forms = document.getElementsByTagName('form'); for (var i = 0; i < forms.length; i++) { forms[i].noValidate = true; forms[i].addEventListener('submit', function(event) {

我已经在使用下面的脚本,但可以覆盖!在CSS中很重要

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

var forms=document.getElementsByTagName('form');
对于(var i=0;i
为什么我在输入字段中没有设置值的情况下单击提交按钮时需要边框颜色,因为safari不支持必需的属性。。。。。。。。。。 如果任何人可以帮助,请帮助我要么覆盖边界属性解决方案,要么为所需属性提供替代解决方案,这也可以在safari浏览器上工作

注意:-不以任何方式使用JQuery….


        <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>
var forms=document.getElementsByTagName('form'); 对于(var i=0;i

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

您的脚本位于表单之前,因此无法工作,脚本必须位于DOM中的元素之后。不,javascript不能覆盖
!重要信息
,因此最好不要使用
!重要信息
,永远@adeneo可能
!重要信息
来自于他using@raman-辛格,你已经查过了吗@balanza-那么应该将框架装箱,
!重要信息
表示您作为开发人员失败(99%的时间)。@adeneo thnx寻求建议(在DOM中的元素之后)