• Spotlight

addClassWhenEmail: Hide the Submit Button for Email Forms

Hate when users submit a form with an email address that just does not work? This little tool — addClassWhenEmail — solves that problem.

The plugin hides the submit button for email forms by default and shows it only when the user enters a valid email address. It works in that the Javascript sets a “trap” on the input field to check with a little help from RegExp if the typed text has “symptoms” of an actual email address. The check is performed with each symbol typed. In case of success, a custom class name is added; if not, it’s removed. The rest is be handled using CSS.

The tool works in a loop so that you can have multiple newsletter subscription forms on the page and each one will be served using this tool. If you need different configurations for each form, you can do that as well.

This tool can be installed in the form of a plugin or with the code. Both options are available in the documentation. The tool is also super-small and lightweight, so you won’t have to worry about it bogging down your website.