.addError still lets me submit the form

[jnsandrew]

I've added

var emailField = $('#id_email').parsley(); window.ParsleyUI.addError(emailField, "emailError", "Your email address isn't valid");

to my form (I'm trying to integrate it with MailGun Validator), it shows the error message but it will still let me submit the form. Have I missed something?

[guillaumepotier]

Yes, ParsleyUI.addError() only handle interface, not validation itself. This should be used along custom work with events like parsley:form:validate and prevent yourself form validation while you.

I definitely should think about a parsley().addError() or parsley().addViolation() that both may prevent validation and display error..

Meanwhile, looking at mailgun API, you could integrate it with parsley.remote and use ParsleyUI.addError() inside your custom ajax validator to display your specific message, along standard remote validation?

[jnsandrew]

This is what I've done already :

$('#id_email').mailgun_validator({
     api_key: '',
     in_progress: function() {
       $('#id_email').addClass("loading");
     },
     error: function() {},
     success: function(response) {
       $('#id_email').removeClass("loading");
       var emailField = $('#id_email').parsley();
       window.ParsleyUI.removeError(emailField, "emailError", "Your email address isn't valid");
       if (!response.is_valid) {
         window.ParsleyUI.addError(emailField, "emailError", "Your email address isn't valid");
       } else if (response.did_you_mean) {
         window.ParsleyUI.addError(emailField, "emailError", "Did you mean '" + response.did_you_mean + "'");
       }
     }
    });

Which shows the error fine, but clicking submit doesn't stop the form from sending (I have other required fields like name using just parsley, and if they are empty then the form doesn't send.

I'll have a look at parsely.remote

[jnsandrew]

I made some progress last night and it looks like parsley remote is what I need, though the current site is still on 1.x.x so I'll have to upgrade and change a few systems before I can finalise it.

I ditched the MailGun plugin in the end and just made the api calls directly, much easier that way. Thanks!

[guillaumepotier]

Awesome ! Could you paste here your sample code and validator? It might be a good parsley.remote example for documentation :)

Best

[jnsandrew]

Will do! Might take around a week until we upgrade some other things and I have a working sample though.

[guillaumepotier]

Your working sample may be a good base for me to integrate it in the doc after quick review :)

[jnsandrew]

We've upgraded our backend bit which lets me upgrade to Parsley 2, though I'm still having problems with the remote function.

Looking through the remote plugin, the problem is I need to send an API key with my GET request and the remote plugin just isn't sending the api key for me wherever I set it. I output the value of remoteOptions and the extend of my options and the default options completely messes it up - I think this may be because I have to wrap my attrs in =" " and not =' ' like the docs.

I think I can patch it from here locally to let me import options with the ".addAsyncValidator" method, I can probably send a pull request if you want. I'm hoping it's just me that's missed something!

[jnsandrew]

I had a play around with parsley.remote.js and added:

// Options parameter 27 : addAsyncValidator: function (name, fn, url, options) {

// If remote options attr not set on input, use the one passed in above 184: if (!this.options.remoteOptions) 185: this.options.remoteOptions = this.asyncValidators[validator].options;

...and then this lets me do something like :

$('[name="q"]').parsley().addAsyncValidator('mycustom', function (xhr) { return 404 === xhr.status; }, 'http://mycustomapiurl.ext', OPTIONS_HERE);

What do you think as a possible alternative to passing in options as in attribute in html. It would mean you can keep the configuration in your .js files then. I can send a pull request too, if you want a proper look at the changes.

[guillaumepotier]

That's a good idea. Maybe L184 and L185 do instead this.options.remoteOptions = $.extend(true, this.options.remoteOptions || {} , this.asyncValidators[validator].options); or something like that to allow both options in validator definition and in dom too.

And I'll be glad to have your contribution in a PR (code + tests ^^)

[jnsandrew]

I just submitted a pull request (#645). I wasn't sure if I needed to 'grunt build' and commit the dist/ directory, when I did it added a lot of new code when comparing to your version, and it didn't mention it in contributing.md, so I left those files out.

[marcandre]

I think this issue can be closed now. If I'm mistaken, ideally open a new one with current state. Thanks.