guillaumepotier / Parsley.js

Validate your forms, frontend, without writing a single line of javascript
http://parsleyjs.org
MIT License
9.05k stars 1.32k forks source link

parsley().on('field:success') not working #991

Closed isAlmogK closed 8 years ago

isAlmogK commented 8 years ago

Really not sure what's going on, I'm using the latest version of jquery and it's possible there is some kind of conflict.

But the following is not working or being fired

$('#quantity').parsley().on('field:success', function() {
        console.log('success');
});

But this does work

    $( "#quantity" ).change(function() {
        console.log('change');
        $('#quantity').parsley().validate();
    });

I see the validation

This is also not working 
  if (false === $('#create-post').parsley().validate('step' + current)) {
                    console.log('false');
                    return false;
} 
marcandre commented 8 years ago

I don't know either. It works.

The reasons why we ask in our contributing guidelines to provide a working example (say in jsfiddle) is threefold: 1) It often will guide you into finding out what's wrong, usually in your code, not in the library 2) If it doesn't, then we can see it in action and figure out what's going on. Sometimes the issue is completely different than what you would expect and only an actual example can lead to a solution. 3) If you don't provide one, then we have to take the time ourselves to make one, to be sure it works as advertised, and if so to show you it works.

isAlmogK commented 8 years ago

It does not work here is the code - https://jsfiddle.net/marcandre/1tk9o2te/

isAlmogK commented 8 years ago

The on('field:success') needs to be submitted but it worked just fine on user input?

marcandre commented 8 years ago

I don't follow. In the fiddle I gave, enter "blah" in the input, press submit, this validates the form, you'll get the alert... How does this not work, exactly?

isAlmogK commented 8 years ago

I had it working without the submit, when you input your values the input field is validated and then success function runs. But this stopped working with the latest jquery version it's not validated on user input anymore

$('#quantity').parsley().on('field:success', function() {
        console.log('success');
});
marcandre commented 8 years ago

Validation does not happen at first until you submit. After that, error fields get revalidated often to try to clear the errors. I think having a trigger option changes that behavior a bit, not too sure why (and not convinced that's the right thing). I you call $('.your-form').parsley().validate() you can force validation manually.

isAlmogK commented 8 years ago

Yes I trigger runs the validation which is what I did and now it's not working the trigger is not happing https://jsfiddle.net/1tk9o2te/1/

isAlmogK commented 8 years ago

You can see it in the examle under the email field I'm not required to sumbit to see the error - http://parsleyjs.org/doc/examples/simple.html

isAlmogK commented 8 years ago

The issue is that $('#create-post').parsley({trigger: 'change'}); false === $('#create-post').parsley().validate()

Does not work, if I use listen it's fine

marcandre commented 8 years ago

In your jsfiddle example, you are binding the form with data-parsley-validate. That's fine, but in your javascript, the options you're giving are ignored, since binding is already done (maybe we should change that behavior though).

You should either specify it in the data attributes (like here) or use the following code: $('#create-post').parsley().options.trigger = 'change';

isAlmogK commented 8 years ago

Okm yea that is very confushing and I take it this new I had no issues with this before I updated the version.

I can't add it to the data attributes as I have different JS checks the only option is "$('#create-post').parsley().options.trigger = 'change';"

However this does not work as you can see here - https://jsfiddle.net/chfpm37h/1/

isAlmogK commented 8 years ago

This is somewhat of a major problem, if javascript options are ignored how can run the following validation which is triggered when a user clicks the next button the form wizard

onNext: function( tab, navigation, index, newindex ) {
            var current = index, next = current + 1;
            if (next > current) {
               console.log('aaaa');
                //console.log(current + ' ' + next);
                //console.log( $('#create-post').parsley());
                if (false === $('#create-post').parsley().validate('step' + current)) {
                    console.log('bbb');
                    return false;
                }
            }
        },
marcandre commented 8 years ago

Mmm, right, in your last fiddle the trigger option, you'll also need to call actualizeOptions:

$('#create-post').parsley().options.trigger = 'change';
$('#create-post').parsley().actualizeOptions();

Normally it's a method you don't need to call, since Parsley does it for you before validating, but here... parsley isn't validating yet on 'change', so you need to call it.

So, just to be clear: javascript options are not ignored, and are actualized before any validation automatically.

isAlmogK commented 8 years ago

That does not work, just tested it - https://jsfiddle.net/chfpm37h/2/

isAlmogK commented 8 years ago

I don't understand if there not ignored then why isn't the following not getting called if (false === $('#create-post').parsley().validate('step' + current))

isAlmogK commented 8 years ago

Any updates on this, still not working on my end or on js fiddle

$('#create-post').parsley().options.trigger = 'change'; $('#create-post').parsley().actualizeOptions();

isAlmogK commented 8 years ago

Any news regarding this, it's still not working

marcandre commented 8 years ago

Oh man, I'm sorry, I was wrong, again... So, here's a working fiddle, using reset instead of actualizeOptions: https://jsfiddle.net/marcandre/zcyfxkeL/

isAlmogK commented 8 years ago

This is working great on jsfiddle but not in my app? I have it in bootstrap wizard and I'm using MeteorJS

isAlmogK commented 8 years ago

@marcandre from what I can tell this only happens from parsely.js 2.1.0 and up, in 2.0.7 it's firing the trigger event I am getting a different error - https://github.com/guillaumepotier/Parsley.js/issues/995

In version 2.1.0 and up in MeteorJS and Jquery 1.11.4 $('#create-post').parsley().options.trigger = 'change'; $('#create-post').parsley().reset();

Does not work

marcandre commented 8 years ago

As I wrote, use reset:

$('#create-post').parsley().options.trigger = 'change';
$('#create-post').parsley().reset();
isAlmogK commented 8 years ago

@marcandre I used reset, my mistake in what I pasted reset still does not work

isAlmogK commented 8 years ago

@marcandre any ideas what might be the issue?

isAlmogK commented 8 years ago

@marcandre really appreciate the help, I finally was able to get to the bottom of this. It's a conflict issue with the meteor package active router https://github.com/zimme/meteor-active-route/issues/43

isAlmogK commented 8 years ago

No the issue 100% on my end I had create-post id twice