Search code examples
polymerweb-component

polymer iron-input separate validate message required and pattern

I am using form validation with patterns, on required fields. When the user opens the form, it all shows the error message that belongs to not matching the pattern. But I want the users only to see the 'required' message when the form field is still empty.

How can I accomplish this? The input is simple, for only numbers and letters:

<paper input pattern="[a-zA-Z0-9]{1,30}" error-message="Only use numbers an letters, max 30 characters" maxlength="30" required auto-validate></paper-input>

It shows "Only use numbers an letters, max 30 characters" in red ofcourse, but initially I want it to show a 'required' message.

Solution

  • This doesn't seem to be possible. You could change the label attribute to say Please enter your name (required) or you could use the placeholder attribute to have some placeholder text in the input when it is empty which could also say that this field is required.