javascript - Mark label as red when required input is not filled -

lets have form input element:

<label for="myinput">label text</label> <input type="text" name="special" id="myinput" required> 

now since input required, , don't enter values in field, error saying

this field required.

validation: appears existing default html5 validation overridden jquery validator. there magic happening, , see can change existing style behavior changing below css

select.error, input[type=text].error, input[type=email].error, input[type=password].error {     border: 2px solid #ff0000; } label.error {     color: #ff0000;     font-size: .8em; } 

i notice in error situation above html becomes below:

<label for="myinput">label text</label> <input type="text" name="special" id="myinput" required> <label class="error" for="myinput">this field required.</label> 

• how think validation happening in first place?
• how make text in first label element text red?
• in code, should looking answer above questions?

first use id attribute label

<label for="myinput" id="mylabel">label text</label> 

, document.getelementbyid('mylabel').style.color = "red";

you can write code on button click or onblur of text box

demo

if using jquery can refer below code

$( "#myinput" ).blur(function() {  document.getelementbyid('mylabel').style.color = "red"; }); 

js solution

html

<label for="myinput" id="mylabel">label text</label> <input type="text" name="special" onblur="blurfunction()" onfocus="focusfunction()"  id="myinput"> 

js

function blurfunction() {     document.getelementbyid('mylabel').style.color = "red";  }