I create a member registration form where he enters his membership card number. The membership card number is a 19-digit number that starts with 6 4 and then 13 digits. Now the user has the opportunity to enter either the last 13 digits, or he can even enter 19 digits. When he enters the full 19 digits to the blur event, I crop the first 6 digits that leave the last 13 digits. My code works fine for all scenarios, but something strange happens when an error occurs in one specific scenario.
Work scenarios
- If the user dials something less than 13 digits or more, then 19 digits, I have a regular expression that checks the user input and shows an error message.
- If the user simply dials 13 digits, his thin
- If the user enters the perfect 19 digits, but his starting 6 digits are not 4, then the error is duplicated.
Script failed
- But when the user enters any digit> 13 and the error message 19, but my input field becomes empty, that is, everything that the user typed simply disappears. Problem with angular library
Please find the code below.
HTML
<input type="text" ng-model="user.CardNumber" ng-blur="trimCardNumber()" ng-required="true" ng-pattern="/^[0-9]{13,19}$/" name="CardNumber">
Controller.js
$scope.trimCardNumber = function () {
if (($scope.user.CardNumber).indexOf("444444") > -1) {
$scope.user.CardNumber = ($scope.user.CardNumber).replace("444444", "");
$scope._ServerForm.CardNumber.$invalid = false;
return true;
}
else if ($scope.user.CardNumber.length != 13) {
$scope._ServerForm.CardNumber.$invalid = true;
}
else {
$scope._ServerForm.CardNumber.$invalid = false;
}
}
I created a JS script for the problem - http://jsfiddle.net/achyut/x69hZ/1/
Steps to play -
- Type 444444123456789012 and blur to see the problem.
source
share