Parsley.js - Uncaught when I first enter required password field, then it works

Question

I'm using Parsley.js.

I have two fields on my form. I want to check both are valid, then remove the "disabled" from the submit button, using a listener.

When I fill out the email field as valid, then enter text into the password field, it comes up as "uncaught" in Chrome and "too much recursion" in Firefox as I type.

If I backspace and delete all the text in the password field and start entering again, it works as planned and recognises the form as valid. I'm just wondering what happens the first time I enter text, can anyone notice a problem?!

My HTML:

<form class="custom">
        <fieldset>
            <div class="default">
                <label for="member_id">Email address</label>
                <input id="member_id" type="email" value="" placeholder="Enter value" required/>
            </div>
            <div class="default">
                <label for="password">Password</label>
                <input id="password" type="password" value="" placeholder="Your password" required/>
            </div>
            <input class="disabled" disabled="disabled" type="submit" value="Login">                
        </fieldset>     
    </form>

And my JQUERY:

var $form = $('#login form');
var $submit = $form.find(':submit');    

$form.parsley({     
    namespace: 'data-parsley-',
    trigger: 'keyup',
    successClass: 'success', 
    errorClass: 'error',        
    errors: {
        errorsWrapper: '<span class="help-inline"></span>',
        errorElem: '<span style="display:block;"></span>',                        
        classHandler: function ( elem, isRadioOrCheckbox ) {
            return $( elem ).parent();
        }
    },
    listeners: {
        onFieldSuccess: function () {
            if ($form.parsley('isValid')) {                    
                console.log('form is valid');  
                $submit.removeClass('disabled').removeAttr('disabled');                                             
                return false;     
            }
        },
        onFieldError: function () {
            $submit.attr('disabled', 'disabled');
            $submit.addClass('disabled');
            return false; 
        }                     
    }  
});

Thanks for any help!

Answer 1

I think that you shouldn't call parsley('isValid') within onFieldSuccess, as it probably triggers a re-validation of all the fields, which gets you into a loop.

Try this instead:

    onFieldSuccess: function () {
        console.log('checking...');
        if ($('#password').parent().hasClass('success') && $('#member_id').parent().hasClass('success')) {
            console.log('success');
            $submit.removeClass('disabled').removeAttr('disabled');                                            
        }
        return true;  
    }

Not perfect, but indicative of a solution. I put it in a fiddle for you to check (and experiment): http://jsfiddle.net/BZ38k/2/

Note that I had to check the class of the parent DIV - I'm not sure why exactly.