Input validation bug

If have the following HTML and validate it on an empty input I get the error message as one expects. If I hit any character the error message goes away. I can then backspace to clear the input and validate again and each time I repeat this process I get an additional error message (they stack).

It’s obvious that on keypress you’re removing one or more classes but not removing the div with the error message. On the next validate() failure you add the classes back in and insert a new error message.

See Note at bottom!

HTML:

  <div class="list no-hairlines-md">
    <ul>
      <li class="item-content item-input">
        <div class="item-inner">
          <div class="item-title item-label">Name</div>
          <div class="item-input-wrap">
            <input type="text" id="name" placeholder="Enter your first name" required validate data-error-message="Please enter your name!">
            <span class="input-clear-button"></span>
          </div>
        </div>
      </li>
    </ul>
    <br>
    <br>
    <!-- obName validates the input before showing the next input -->
    <button class="button button-fill color-blue" id="obName">Next</button>
  </div>

Javascript:

  app.input.validate('#name');
  if( ! $("#name").hasClass("input-invalid") )
  {
    // input validated
  }
  else
  {
    // input failed validation
  }

In addition to the above, if you add the following to the input:

  pattern="^[^±[email protected]£$%^&*_+§¡€#¢§¶•ªº«\\/<>?:;|=.,]{1,20}$"

the app.input.validate("#name") does not validate against it as in I can enter numbers such as 123 as the name and it accepts it.

Note: Removing the pattern= seems to solve this.

Can’t replicate issue with stacking same error messages. And if we take a look at source code https://github.com/framework7io/framework7/blob/master/src/core/components/input/input.js#L69-L75 we can see that new element with error message only added in case if there are no such elements. So can’t understand how it can happen.

Do you have any live app or JSFiddle with the issue?

I was producing it pretty frequently but after documenting it here I went on to the next step. Since I removed the pattern I was trying to validate against, it works fine.

Now, I’m letting you validate that data exists and then use my pattern in a regex match and add my own error if the entered name has any of those special characters.

I’ll try to get back to it today but I have to get this onboarding finished before I can.