Highlight empty form fields

Hi all,

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.

TIA


Here is my site Read-Only: https://preview.webflow.com/preview/countfire-2021?utm_medium=preview_link&utm_source=designer&utm_content=countfire-2021&preview=73d779003ab3a3f7fe8215c7954b3036&pageId=6141e0c4d4eb871f8f1519d4&workflow=preview
(how to share your site Read-Only link)

Hey @danielcobb

Is this the behavior you would like to recreate ? :
https://playground-jptrinh.webflow.io/empty-input
https://preview.webflow.com/preview/playground-jptrinh?utm_medium=preview_link&utm_source=designer&utm_content=playground-jptrinh&preview=47546c1b906497e77a2e02b81d8548a5&pageId=61545b8ce630c3c97bfac519&workflow=preview

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

1 Like

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

base on @jptrinh just put the code inside a function and run this function only when the form submits.

<script>
  function basicValidation(){
    // 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" );
      }
    });
  }

  $( "#apply-form" ).click(function() {
    basicValidation();
  })

</script>

https://api.jquery.com/submit/

Maybe highlight only the required empty fields (Better UI):

$( "#apply-form input[required]" ) /*selector*/

warning - remember also to override focus and so on.

image