What's the pattern attribute in paper-input-container?

Question

I want to auto-validate the input in some <paper-input-container>'s <input is="iron-input"> field, so that it follows a dd.mm.yyyy pattern. Can I do this with the pattern attribute?

I tried pattern="^(\d{2}).\d{2}.(\d{4})$" and pattern="(1-9|0[1-9]|1[0-9]|2[0-9]|3[0-1]).([1-9]|0[1-9]|1[0-2]).(20[1-3][0-9])" together with allowed-pattern="[\d.]", but that doesn't work.

Is the pattern attribute meant to support this use case?

Answer 1

The <paper-input>.pattern is ignored unless you do one of the following:

• Enable automatic input validation with <paper-input>.autoValidate

  <paper-input auto-validate
               pattern="^(\d{2}).\d{2}.(\d{4})$">
  </paper-input>
  

  codepen

• Manually call <paper-input>.validate() (e.g., on button click)

  <paper-input id="input" pattern="..."></paper-input>
  <button on-tap="_validateInput">Validate</button>
  
  // script
  _validateInput: function() {
    this.$.input.validate();
  }
  

  codepen

• Set <paper-input>.required, and use an <iron-form> wrapper, which automatically calls <paper-input>.validate() on submit

  <form id="form" is="iron-form" ...>
    <paper-input required
                 pattern="..."></paper-input>
    <button on-tap="_submit">Submit</button>
  </form>
  
  // script
  _submit: function() {
    this.$.form.submit(); // <-- auto validates required form inputs
  }
  

  codepen