Reveal Additional Fields on Valid Email Input

At a glance

The post contains a script that hides additional fields initially, and reveals them when a valid email is entered in the input field. The community members discuss whether the script uses jQuery, and one community member recommends using a tool called Slater.app instead of jQuery. The community members also discuss the possibility of using vanilla JavaScript instead of jQuery, especially since the project is on Webflow, which may already include jQuery.

Useful resources

HHarry Dodd

<script>
$(document).ready(function() {
    // Hide the additional fields initially
    $('.additional-fields').hide();
    
    // When the user types in the email input
    $('#email-input').on('input', function() {
        var email = $(this).val();
        // You can add your email validation logic here
        
        // If email is valid, reveal the additional fields
        if (isValidEmail(email)) {
            $('.additional-fields').slideDown();
        }
    });
    
    // Function to validate email (you can replace this with your own validation logic)
    function isValidEmail(email) {
        // Your validation logic here
        return /\S+@\S+\.\S+/.test(email);
    }
});
</script>

6 comments

MMatt Johnson

do you have jquery included in the project already somewhere or? Because this code here looks like JQuery to me.

MMatt Johnson

#notajsexpert

MMatt Johnson

I would highly recommend Slater.app - https://slater.app/ - this is a perfect use case for it.

I barely know JS but I used it to create a calculator form hooked up to a mapbox API to calculate delivery estimates.

HHarry Dodd

hey matt, I havent got any jquery anywhere else on the site. Im no js expert either haha. Thanks mate will take a look at slater!

MMatt Johnson

okay, I would prompt GPT to not use JQuery then, and see if what it results in might work. I really dont think you "need" JQuery.

Also I assume this is a Webflow project, and I do think that JQuery is baked into Webflow but I don't know that 100%.

Safer to just try to get the interaction working with vanilla JS first, then slowly add in complexities like animations/transitions etc.

HHarry Dodd

Sorry should of been more specific, yeah this is a webflow project!

let me go talk to chatgpt and see what it says

Add a reply

Community forum for knowledge and support

Reveal Additional Fields on Valid Email Input