Why doesn't my jquery work in gravity forms?

Question

I work with the Wordpress plugin Gravity forms.

Now I would like to add some 'live-validation'. (When the fields have value in them the submit button changes color.)

I work with this script, which works fine when I create a basic form.

<script type="text/javascript">
$(window).load(function(){
(function() {
    $('.gform_fields  > .medium').keyup(function() {

        var empty = false;
        $('.gform_fields > .medium').each(function() {
            if ($(this).val() == '') {
                empty = true;
            }
        });

        if (empty) {
            $('.gform_button').css("","");
        } else {
            $('.gform_button').css("background-color","green");
        }
    });
})()
});  

</script>

But when I try to use the script on my Gravity form it doesn't do anything?

So here's my example: http://goo.gl/a4m0Kv

As you can see, there is a small form at the bottom, with a submit button. When the inputs are filled, the submit button turns green.

The same should happen with the Gravity form, but for some reason it doesnt work?

Hope someone could help :)

Answer 1

Your selector doesn't return input you are talking about.

'.gform_fields > .medium'

returns

<input type=​"text" id=​"email" class=​"medium" name=​"email">​
<input type=​"text" id=​"email" class=​"medium" name=​"email">​
<input type=​"text" id=​"email" class=​"medium" name=​"email">​
<input type=​"text" id=​"email" class=​"medium" name=​"email">​

Remove > in your selector so it will look like '.gform_fields .medium' then it returns 5 fields.

<input name=​"input_1" id=​"input_2_1" type=​"text" value class=​"medium" tabindex=​"1">​
<input type=​"text" id=​"email" class=​"medium" name=​"email">​
<input type=​"text" id=​"email" class=​"medium" name=​"email">​
<input type=​"text" id=​"email" class=​"medium" name=​"email">​
<input type=​"text" id=​"email" class=​"medium" name=​"email">​

selector '.gform_button' returns two buttons, thats why both buttons are turning green.

You should edit selectors to make them return proper elements.