Using Javascript add border style color for input field(when submit with no value) which has already border in css with !important tag

Question

I am already using script below for that but can override !important in 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>

and why i want border color when submit button clicked if no value set in input field because safari does not support required attribute.......... If any one can help pls help me out either overriding border attribute solution or alternative solution for required attribute which can work on safari browser too.

NOTE:- No use of JQuery in any way....

Your script comes before the form, so that won't work, the script has to come after the elements in the DOM. And no, javascript can not override `!important`, so better not use `!important`, ***EVER*** !!! — adeneo, Jan 09 '15 at 08:39
@raman-singh have you check this out already? http://stackoverflow.com/questions/11178673/how-to-override-important — balanza, Jan 09 '15 at 08:45
@balanza - then the framework should be binned, `!important` means you've failed as a developer ( 99% of the time). — adeneo, Jan 09 '15 at 08:56
@adeneo thnx for suggestion (to come after the elements in the DOM.) — Raman Singh, Jan 09 '15 at 09:00
@adeneo if u r modifing webpage which u have no access to code except CSS in that case sometimes u have to use !important — Raman Singh, Jan 09 '15 at 09:02

score 0 · Accepted Answer · answered Jan 09 '15 at 09:04

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

Caution:- It will remove all inline style setting and add new one which is in the script

Using Javascript add border style color for input field(when submit with no value) which has already border in css with !important tag

1 Answers1