Form Field Validation Interactions

Design help Animations & Interactions
1

I love on webflow.com how if the sign up form isn’t filled in, or isn’t a valid email format it has a little red line under the field. How do I recreate/expand upon this. I would love to create some cool interactions after the field is filled in correctly to make form filling a better UX on my site www.inspacecreative.com.

37 AM
37 AM1229×463 76.5 KB

1 Like
2

@parkerwest

Hey Eli, you could use setCustomValidity via JS like this;

1. Add an attribute to all form-fields you would like to validate like this;

com-2017-08-06-23-16-42

2. Add this script to the footer section (before ) of custom code;

<script>var input = $('.form-field-class');

function invalidInputs(input) {
      if (input.value == '') {
        event.preventDefault();
        input.setCustomValidity('');
        $('.form-field-class').css('border-bottom','2px solid red');
      }

else if(input.validity.typeMismatch){
        event.preventDefault();
        input.setCustomValidity($(input).val(''));
        input.setCustomValidity('');
        $('.form-field-class').css('border-bottom','2px solid red');
      }

else {
        event.preventDefault();
        input.setCustomValidity('');
        $('.form-field-class').css('border-bottom','0px solid transparent');
      }
return true;
}</script>
2 Likes
3

Thank you! I haven’t tried this yet, but once I do, I’ll post my link!

1 Like
4

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.