My regular expression is designed to ensure that user input is alphanumeric with a single space included. Here's the code snippet for it:
<input type="text" ng-minlength="5" ng-maxlength="8" ng-pattern="/^[0-9A-Z]*\s[0-9A-Z]*$/gi" required placeholder="Postcode" ng-model="addr.postcode" class="form-control" name="postcode" />
<div class="col-xs-12" ng-messages="myform.postcode.$error" ng-if="myform.$submitted || myform.postcode.$dirty">
<div class="text-warning" ng-message="minlength">Postcode is too short.</div>
<div class="text-warning" ng-message="pattern">Must contain a space.</div>
<div class="text-warning" ng-message="maxlength">Postcode is too long.</div>
</div>While testing this in Chrome on desktop, the validation works perfectly. It shows an error if the input lacks a space, and the error disappears once a space is added. For example, "AB12 3CD" passes while "AB123CD" fails, which is expected behavior.
However, opening the same page on mobile devices (tested on iPhone 5 & 6, and Windows Phone 8.1) always results in the pattern failing, regardless of the input. Both "AB12 3CD" and "AB123CD" fail the validation.