How to link form button behaviour and accessibility to data validation in form fields

Design help Custom code
1

Greetings everyone,

I’ve been using Webflow for a week or two now. This entry is my first post on the forum. It seems like a warm and welcoming community based on the other posts that I’ve read.

I hope that I chose the correct category for this post. I chose the “custom code” category because I’m guessing that Webflow does not have any built-in functionality for what I’m about to propose. I didn’t find anything in the Webflow designer nor on Webflow University.

I did my due diligence and searched the forum to see if someone already asked my question, and I didn’t come across anything, although there were some interesting parallel articles here and here.

So here goes…

I want to make my form submission button a lighter colour while the form field data is invalid. An example of invalid data would be the email address “test@” instead of “test@test.com” Conversely, I’d like to change that same button to a darker colour when that data is valid. I appreciate that the forms come with behind-the-scenes regex that prevents some invalid data from going through. I’d like to take this one step further by making the form button reactive.

I think that what I hope to accomplish is standard behaviour for form buttons around the net, and the folks over on a website called Sleeknote do this well. I’ve included a screencast of their form with this post as an example here.

I’m posting today because I have no idea how to do this on Webflow. If someone could pretend they’re explaining how to do this to a 5-year old, that would be amazing. I don’t know any of the vernacular that seasoned veterans know.

Be well,

Jamie

Here is my site’s read-only link: here

2

Here, I’ve created this small script for you:

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const emailInput = document.querySelector('YOUR_SELECTOR_HERE');
    if (!emailInput) return;

    emailInput.addEventListener('input', () => {
      const isValid = emailInput.checkValidity();
      emailInput.classList[isValid ? 'add' : 'remove']('valid');
      emailInput.classList[isValid ? 'remove' : 'add']('invalid');
    });
  });
</script>

Replace YOUR_SELECTOR_HERE with your element selector. When the user inputs data, the input field will receive a “valid” or “invalid” class, use those for styling as you want.

Cheers,

Alex.

3

Hi Alex,

Thank you for answering my query!

And, guess what? It worked! I’m happy: these are exciting times.

My business partner had asked me to change the button colour, not the input field colour, and so with my limited knowledge of these things I made the following tweak to the code after some trial and error and it works nicely.

Now, I just have to put some serious style on my button and get rid of the gaudy green and red styling that I was using as I practiced your implementation.

Once again, thank you so much for your help! It works like a charm.

Jamie

Here’s the modification I made:

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const emailInput = document.querySelector('YOUR_EMAIL_FIELD_SELECTOR_HERE');
    const targetFormButton = document.querySelector('YOUR_BUTTON_SELECTOR_HERE');
    if (!emailInput) return;

    emailInput.addEventListener('input', () => {
      const isValid = emailInput.checkValidity();
      targetFormButton.classList[isValid ? 'remove' : 'add']('invalid');
      targetFormButton.classList[isValid ? 'add' : 'remove']('valid');
    });
  });
</script>

As you mentioned: people can replace the SELECTORS with their element selectors. When the user inputs data, the form button will receive a “valid” or “invalid” class, use those for styling as you want.

Finally, with my own variables as examples, the script looked like this:

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const emailInput = document.querySelector('#email');
    const targetFormButton = document.querySelector('#formSubmitButton');
    if (!emailInput) return;

    emailInput.addEventListener('input', () => {
      const isValid = emailInput.checkValidity();
      targetFormButton.classList[isValid ? 'remove' : 'add']('invalid');
      targetFormButton.classList[isValid ? 'add' : 'remove']('valid');
    });
  });
</script>
4

@JamieMTL Oh, I didn’t notice you wanted the button to change and not the input itself!
You did it right, although I would put a safety null check for the button query just in case:

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const emailInput = document.querySelector('#email');
    const targetFormButton = document.querySelector('#formSubmitButton');
    if (!emailInput || !targetFormButton) return;

    emailInput.addEventListener('input', () => {
      const isValid = emailInput.checkValidity();
      targetFormButton.classList[isValid ? 'remove' : 'add']('invalid');
      targetFormButton.classList[isValid ? 'add' : 'remove']('valid');
    });
  });
</script>
5

Oh. That’s a good point. Thanks for the tip!