Search code examples
dartdart-polymerpaper-elements

paper-input validate does not work

I am trying to validate the following:

<paper-input floatinglabel
  id="ethinic-group"
  label="Ethnic Group"
  value='{{race.ethnicGroup}}'
  validate="[A-Za-z'\s-]*"
  error="Only letters, space and dash are allowed">
</paper-input>

If I put a number in the field, validation is not fired. Is there something else that I should add?

Solution

  • You can - check the invalid attribute and for example change the appearance of the element depending on the attribute value
    - listen on on-input-invalid='{{inputInvalidHandler}}' or `on-input-valid='{{inputValidHandler}}' and change the appearance by code

    see http://www.polymer-project.org/docs/elements/core-elements.html#core-input for more details.
    (As far as I know paper-input builds on top of core-input)

    Update

    Your regex is missing ^ and $

    validate="^[A-Za-z'\s-]*$"

    You had this already in HowTo add a required indicator to paper-input ;-)

    See also Taking total control of PaperInput validation for an example about custom validation.