Async validation on paper-input

[al...@streak.com]

I'm having a tough time finding any examples of validating input into a paper-input when the validation needs to happen asynchronously. Looking at the docs, implementing https://elements.polymer-project.org/elements/iron-validator-behavior doesn't work because you have to implement the validate() method which returns a boolean (synchronously). 

I'm trying to validate the input of a paper-input against a webservice, any ideas?

[Arthur Evans]

Yeah, I explored this a while back. It's confusing, because there are essentially three levels of enforcement: 

1) Real-time input enforcement. Some inputs support a regex pattern, that controls what the user can actually type in the field. 

2) Field & form validation (provided by iron-validator, for example). By default, this is invoked _when the user presses submit_. 

3) The kind of validation you're talking about, using an async web request.

In the case of validating using a webservice, you don't want to start when the user presses the submit button. You probably want to fire off a request when the input field loses focus. (Another, slightly more aggressive option is to fire off the request when the user stops typing for a certain period of type, like 500ms. However, I was unable to get this to work smoothly when I tried it.)

It can be nice for the user if you do async form validation, so that you can enable/disable the submit button based on whether the form is valid, instead of waiting until they click the button and then pointing out the issue.

The devil is in the details, but I think one working pattern is to do something like this:

• Whenever the user blurs a text area, or changes the state of a checkbox or option, etc., perform a validation  check:
  
• If the field that changed requires remote validation, fire off a web request and continue this process when the response comes back.
• Check the validity on all of the fields, and enable/disable the submit button accordingly.

Ideally, you'd do some kind of periodic checks as well when the user isn't typing. Otherwise, the user can finish entering data in the last input field, and sit there waiting for the submit button to be enabled, which won't happen until they click elsewhere on the screen. But as I said, I didn't get that working when I was playing with this.

Hope that helps.

Cheers,

Arthur

On Thu, Dec 10, 2015 at 8:23 AM, <al...@streak.com> wrote:

I'm having a tough time finding any examples of validating input into a paper-input when the validation needs to happen asynchronously. Looking at the docs, implementing https://elements.polymer-project.org/elements/iron-validator-behavior doesn't work because you have to implement the validate() method which returns a boolean (synchronously). 

I'm trying to validate the input of a paper-input against a webservice, any ideas?

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/9c4dbc32-de42-4396-adf8-afccd7004a22%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Aleem Mawani]

Thanks for the thoughtful response!

On Thu, Dec 10, 2015 at 10:43 AM Arthur Evans <art...@google.com> wrote:

Yeah, I explored this a while back. It's confusing, because there are essentially three levels of enforcement: 

1) Real-time input enforcement. Some inputs support a regex pattern, that controls what the user can actually type in the field. 

2) Field & form validation (provided by iron-validator, for example). By default, this is invoked _when the user presses submit_. 

3) The kind of validation you're talking about, using an async web request.

In the case of validating using a webservice, you don't want to start when the user presses the submit button. You probably want to fire off a request when the input field loses focus. (Another, slightly more aggressive option is to fire off the request when the user stops typing for a certain period of type, like 500ms. However, I was unable to get this to work smoothly when I tried it.)

It can be nice for the user if you do async form validation, so that you can enable/disable the submit button based on whether the form is valid, instead of waiting until they click the button and then pointing out the issue.

The devil is in the details, but I think one working pattern is to do something like this:

• Whenever the user blurs a text area, or changes the state of a checkbox or option, etc., perform a validation  check:
  
• If the field that changed requires remote validation, fire off a web request and continue this process when the response comes back.

This is the part I need help with. I can listen to change events on the input and fire off the ajax call (throttled). However, when the webrequest comes back and it is invalid, how do I mark the paper-input as such? 

[Arthur Evans]

I used a paper-input-container with an iron-input inside of it, so I could data bind to the input's native `invalid` property, like this:

http://jsbin.com/beduga/9/edit?html,console,output

In this case, the "webservice" makes sure that your username starts with "bob". 

Hope this helps,

Arthur

[Aleem Mawani]

Ahhh that was the key, got it working. 

Thanks for the help!