Tuesday, 19 September 2017

SIGNUP Form With Validation AngularJs

No comments
HTML

<form class="register-form" name="formRegister">
                    <p class="form_logo">
                        <img title="" alt="" src="img/logo.png" class="">
                    </p>
                    <label ng-class="{ 'has-errors' : formRegister.userEmail.$invalid && !formRegister.userEmail.$pristine, 'no-errors' : formRegister.userEmail.$valid}">
                        <input focus id="registerEmails" type="email" placeholder="Email" ng-model="userEmail">
                    </label>              
                    <label ng-class="{ 'has-errors' : formRegister.userPassword.$invalid && !formRegister.userPassword.$pristine, 'no-errors' : formRegister.userPassword.$valid}">
                        <input focus type="password" placeholder="Password" id="userPassword" name="userPassword" ng-model="userPassword" required />
                    </label>
                    <label ng-class="{ 'has-errors' : formRegister.confirmPassword.$invalid && !formRegister.confirmPassword.$pristine, 'no-errors' : formRegister.confirmPassword.$valid}">
                        <input focus type="password" id="confirmPassword" name="confirmPassword" placeholder="Retype Password" ng-model="confirmPassword" required compare-to="userPassword">
                    </label>
                    <div class="msg-block ng-invalid" ng-show="formRegister.$error">
                        <span class="msg-error ng-invalid" ng-show="formRegister.confirmPassword.$error.pwmatch">
                            Password doesn't match.
                        </span>
                    </div>
                    <button ng-click="doRegister()" class="button button-block button-balanced" ng-disabled="formRegister.$invalid" style="padding:0 !important">
                        SIGN UP
                    </button>
                    <p class="message">Already registered? <a ng-href="#/app/login">Sign In</a></p>
                 
                </form>


Directive


//password compare
app.directive('compareTo', [function () {
    return {
        require: "ngModel",
        scope: {
            otherModelValue: "=compareTo"
        },
        link: function (scope, element, attributes, ngModel) {
            var firstPassword = '#' + attributes.compareTo;
            element.on('keyup', function () {
                scope.$apply(function () {
                    var v = element.val() === $(firstPassword).val();
                    ngModel.$setValidity('pwmatch', v);
                });
            });
        }
    };

}]);


//move to next input when enter
app.directive('focus', function () {
    return {
        restrict: 'A',
        link: function ($scope, elem, attrs) {
            elem.bind('keydown', function (e) {
                var code = e.keyCode || e.which;
                if (code === 13) {
                    e.preventDefault();
                    //          elem.next().focus();

                    if (elem.attr('id') == "registerEmail") {
                        $(':input:eq(' + ($(':input').index(this) + 1) + ')').on('focus', function () {
                            $(this).attr('type', 'date');
                        });
                        $(':input:eq(' + ($(':input').index(this) + 1) + ')').focus().click();
                    }
                    else {
                        $(':input:eq(' + ($(':input').index(this) + 1) + ')').focus();
                    }
                }
            });
        }
    }
});
read more