I need to validate an input field for credit card numbers.
The input should only be considered valid once it reaches a minimum length of 13 characters. To allow users to enter spaces in the field, I have implemented a JavaScript function to remove these spaces. Within this function, I want to validate the credit card number (sans spaces) and mark it as ng-invalid if the length is less than 13 or greater than 16.
Here's the basic idea:
$scope.ccHandler = function() {
if ($scope.ccNumber == '') {
document.getElementById("ccProvider").disabled = false;
}
$scope.ccNumber = inputCC.value.split(' ').join('');
console.log("This is my CC: " + $scope.ccNumber);
isValidCreditCardNumber($scope.ccNumber);
getCreditCardProvider($scope.ccNumber);
document.getElementById("ccProvider").disabled = true;
if ($scope.ccNumber.length < creditCardNumberMinLength || $scope.ccNumber.length > creditCardNumberMaxLength) {
console.log("ccNumber is still invalid!");
}
}
This code snippet would fit into the XHTML like so:
<div class="form-group" ng-switch-when="CreditCard">
<label class="col-xs-3 col-sm-3 control-label">Credit Card Number</label>
<div class="col-xs-5 col-sm-5 col-md-5">
<input name="ccNumber" class="form-control" type="text" id="inputCC" ng-change="ccHandler();updateCount()" ng-model="ccNumber" ng-required="true"/>
</div>
</div>
How can I implement this effectively?