test

test

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<form id="signup-form" name="myForm" >
<!-- credit card EXP -->
          <div class="form-group  has-feedback" ng-class="{'has-error': myForm.ccdate.$invalid, 'has-success': !myForm.ccdate.$invalid}">
            <label for="ccdate">Date d'expiration de la carte, exemple: {{new Date() | date:"MM/yyyy"}}</label>
            <input id="ccdate" type="text" class="form-control" name="ccdate" ng-model="formData.ccdate" validation="pattern=/^(0[1-9]|1[0-2])\/(20[0-9]{2})$/:alt=Doit etre de la forme MM/YYYY ou MM le mois sur chifres et YYYY année sur 4 chifres, exemple 12/2016" validation-error-to="myErrorId220">
            <span class="glyphicon form-control-feedback" aria-hidden="true" ng-class="{'glyphicon-remove': myForm.ccdate.$invalid, 'glyphicon-ok': !myForm.ccdate.$invalid}"></span>
            <small id="myErrorId220" class="error" style="padding: inherit"></small>
          </div>
</form>

CSS

/* AngularJS Form validation styling */
.validation.help-block {
    color: #E07676;
    font-style: italic;
}

/* invalid & (dirty or touched) => red -- CSS3 only */
.ng-invalid.ng-dirty:not(:focus),
.ng-invalid.ng-touched:not(:focus) {
    border-color: #e74c3c;
}

/* valid & dirty => green */
.ng-valid.ng-dirty.ng-touched {
    border-color: #2ecc71;
}

/* error display font italic, text-danger is red in BS */
.validation.text-danger {
    font-style: italic;
}

JavaScript

/**
 * Angular-Validation Directive and Service (ghiscoding)
 * http://github.com/ghiscoding/angular-validation
 * @author: Ghislain B.
 * @version: 1.4.18
 * @license: MIT
 * @build: Sun Dec 20 2015 23:57:57 GMT-0500 (Eastern Standard Time)
 */
angular.module("ghiscoding.validation",["pascalprecht.translate"]).directive("validation",["$q","$timeout","validationCommon",function(a,e,i){return{restrict:"A",require:"ngModel",link:function(n,t,r,l){function o(i,r){var o=a.defer(),d=!1,m="undefined"!=typeof r?r:E.typingLimit,s=E.getFormElementByName(l.$name);if(Array.isArray(i)){if($=[],O="",m=0,i.length>0)return"function"==typeof s.ctrl.$setTouched&&s.ctrl.$setTouched(),u(i,typeof i);m=0}return i&&i.badInput?v():(E.validate(i,!1),E.isFieldRequired()||w||""!==i&&null!==i&&"undefined"!=typeof i?(s&&(s.isValidationCancelled=!1),(i||E.isFieldRequired()||w)&&l.$setValidity("validation",!1),"SELECT"===t.prop("tagName").toUpperCase()?(d=E.validate(i,!0),l.$setValidity("validation",d),o.resolve({isFieldValid:d,formElmObj:s,value:i}),o.promise):("undefined"!=typeof i&&(0===r?(d=E.validate(i,!0),n.$evalAsync(l.$setValidity("validation",d)),o.resolve({isFieldValid:d,formElmObj:s,value:i}),e.cancel(V)):(E.updateErrorMsg(""),e.cancel(V),V=e(function(){d=E.validate(i,!0),n.$evalAsync(l.$setValidity("validation",d)),o.resolve({isFieldValid:d,formElmObj:s,value:i})},m))),o.promise)):(f(),o.resolve({isFieldValid:!0,formElmObj:s,value:i}),o.promise))}function d(a,e,i){var n=o(a,0);n&&"function"==typeof n.then&&($.push(n),parseInt(e)===i-1&&$.forEach(function(a){a.then(function(a){switch(A){case"all":a.isFieldValid===!1&&a.formElmObj.translatePromise.then(function(e){O.length>0&&g.displayOnlyLastErrorMsg?O="["+a.value+"] :: "+(a.formElmObj.validator&&a.formElmObj.validator.params?String.format(e,a.formElmObj.validator.params):e):O+=" ["+a.value+"] ::...