My client has asked for the following function on a form:
Not all form fields are filled out - those that are empty to be highlighted with a red border.
I know the browser has a tooltip to fill out required fields but my client would like a different experience.
Not sure if this is a custom code solution or design/interaction based.
<script>
// Add class .warning if input is empty on load
$( "#apply-form input" ).each(function() {
if( !$(this).val() ) {
$(this).toggleClass( "warning" );
}
});
// Add class .warning if input is empty when unfocusing an input or removes it if not empty
$( "#apply-form input" ).blur(function() {
if( !$(this).val() ) {
$(this).addClass( "warning" );
} else {
$(this).removeClass( "warning" );
}
});
</script>
I tried to optimize the code with only one function, but it didn’t work
Thats almost perfect - thank you so much.
I don’t want the fields to be red on page load though - only when the submit button is hit it highlights the empty fields