Background Color Of Required Field

August 31, 2023 Post a Comment

I am using the required attribute on certain fields in a form. When form is submitted, required fields that are not filled out get the standard red border around them. Is there a w

Solution 1:

You can use CSS attribute selector like so:

input[required] {
  background-color: red;
}

<inputid="LastName"name="LastName"type="text"placeholder="Last Name"required/>

This will select inputs with required attributes. Now, you can apply this with some simple JavaScript to achieve the desired effect:

var submit_button = document.getElementById("submit_button");

submit_button.addEventListener("click", function(e) {
  var required = document.querySelectorAll("input[required]");
  
  required.forEach(function(element) {
    if(element.value.trim() == "") {
      element.style.backgroundColor = "red";
    } else {
      element.style.backgroundColor = "white";
    }
  });
});

<inputid="FirstName"name="FirstName"type="text"placeholder="First Name"required/><inputid="LastName"name="LastName"type="text"placeholder="Last Name"required/><inputid="submit_button"type="submit">

What this does is add an event listener when the submit button is clicked. When it is, it uses querySelectorAll to get all the inputs that match the CSS attribute selector, input[required]. Next, it does a for-each loop over the returned list of elements. Finally, it checks each inputs value, trimmed, to makes sure there's some content in there (spaces don't count). If there's nothing in the input, it sets the background color to red.

Notes:

You can tweak it as you like, make sure to cancel whatever event you are handling if the inputs are invalid, and you can add classes for styles instead of using element.style.<style>.

Solution 2:

You can change it using css as mentioned in some comments above, if it doesn't work then check whether parent background-color attribute is set, in that case you can use !important tag to enforce for the child.

Solution 3:

Hello you can try this by basic Css

:required {
 background: red;
 }

Or using jQuery easily it will work dynamically On button click the background color will be red hope it helps.

the html code

<inputid="LastName" name="LastName"type="text"  placeholder="Last Name"
required/>
<inputid="sub"type="button">

and the jquery code

<script>
$('#sub').click(function(){
$('#LastName').each(function() {
if($(this).val() == '') {
$(this).css('background-color' , '#FF0000');
$(this).attr("placeholder", "Required");
 }
 });
 });
 </script>

But if you want to do this for an entire form then it will be something like below

<script>
    $('#sub').click(function(e){ //submit button name
    e.preventDefault()
    $('.required').each(function() {   //a constant class for evert input itemif($(this).val() == '') {
    $(this).css('background-color' , '#FF0000');
    $(this).attr("placeholder", "Required");
    }
    });
    });
    </sctript>

see the below fiddle required Fiddle

must add inside head jQuery Library

<head><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></head>

Solution 4:

input[type="text"],lastname {
  background-color : red;
}

Solution 5:

bodyinput:focus:required:invalid,
bodytextarea:focus:required:invalid {
  color: green; 
}

Html5 World