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="^[^±!@£$%^&*_+§¡€#¢§¶•ªº«\\/<>?:;|=.,]{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.