Javascript and css to take required and placeholder-shown fields and mark them with warning colors automatically, and clear the marks after they are valid fields

formsample.html

<form action="" enctype="multipart/form-data" method="post">
    <p>
    <label for="name">Name: </label>
    <input id="name" name="name" required="" size="65" type="text" />
    </p>
    <p>
    <label for="jobtitle">Job Title:</label>
    <input id="jobtitle" name="jobtitle" required="" size="65" type="text" />
    </p>
    <p>
    <label for="terminationdate">Termination Date:</label>
    <input id="terminationdate" name="terminationdate" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" required="" type="date" placeholder="YYYY-MM-DD" />
    </p>
    <p>
    <label for="selectwhy">Why:</label>
    <select id="selectwhy" name="selectwhy" required="">
        <option disabled="disabled" selected="selected" value="">Select Reason</option>
        <option value="Resigned">Resigned</option>
        <option value="Terminated / Cause">Terminated / Cause</option>
        <option value="Terminated / Performance">Terminated / Performance</option>
    </select>
    </p>
    <p>
    <label for="reason">Reason:</label>
    <input id="reason" maxlength="63" name="reason" size="65" type="text" value="" />
    </p>
    <p>
    <label for="miscellaneous">Miscellaneous:</label>
    <input id="miscellaneous" maxlength="63" name="miscellaneous" size="65" type="text" />
    </p>
    <p>
    <label for="branch">Branch:</label>
    <input id="branch" name="branch" required="" size="65" type="text" />
    </p>
    <p>
    <label for="approvedby">Approved By:</label>
    <input id="approvedby" name="approvedby" required="" size="65" type="text" />
    </p>
    <p>
    <label for="approvaldate">Approval Date:</label>
    <input id="approvaldate" name="approvaldate" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" required="" type="date" placeholder="YYYY-MM-DD" />
    </p>
    <p>
    <label for="branchmanagername">Branch Manager Name:</label>
    <input id="branchmanagername" name="branchmanagername" required="" size="65" type="text" />
    </p>
    <p>
    <label for="branchmanageremail">Branch Manager Email:</label>
    <input id="branchmanageremail" name="branchmanageremail" required="" size="65" type="email" />
    </p>
    <p></p>
    <div class="sign">
    _______________________________________________<br><span style="font-size: small;">Branch Manager Signature</span>
    </div>
     
     
    <p class="printbutton"> <!-- print.button --> </p>
    <button id="submit" class="btn btn-primary" name="submit" type="submit">Submit form by Email</button>
</form>

validateindicator.css

:root {
  --warning: red;
}
:required:where(input,textarea,select):where(:placeholder-shown, :invalid) {
  border-color: var(--warning);
  border-width: 2px;
  border-radius: 2px;
}
.required {
  color: var(--warning);
  font-weight: bolder;
}

/* display */
form p {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: "labels fields fields";
  column-gap: 0.66em;
}
form label {
  grid-column: labels;
  text-align: right;
}
form input, form textarea, form select {
  grid-column: fields;
}
.sign { text-align: right; font-style: oblique;}
@media screen and (min-width: 8.5in) {
  form { max-width: 8.0in; }
}
@media print {
  form { max-width: 8.0in; }
  button { display: none; }
}

validateindicator.js

// Uses jquery
$(function() {
	$('input[required],textarea[required],select[required]').each( function(){
		$("label[for='" + $(this).attr('name') + "']").addClass('required');
	});
  
	$('form').on(
		'blur',
		'input[required],textarea[required],select[required]',
		function () {
			$("label[for='" + $(this).not(":placeholder-shown,:invalid").attr("name") + "']").toggleClass('required');
	});

	if (window.print) {
		$(".printbutton").append('<button class="btn btn-primary" value="Print" onClick="window.print()">Print Completed Form</button>');
			 
	};
});

demo on CodePen