jQWidgets Forums

This topic contains 2 replies, has 1 voice, and was last updated by Keshavan 8 years, 11 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

jqxValidator Posts
June 17, 2016 at 6:03 am jqxValidator #85198
Keshavan
Participant
Hi,

How to call ‘register’ function upon successful jqxvalidation in below code.

Thanks,
Keshavan

Angular Controller.
——————
```
    (function () {
        authController = function ($scope, $firebaseAuth, service, validate) {
            $scope.authData = null;
            $scope.isValid = false;
            $scope.error = null;
            $scope.email = null;
            $scope.password = null;
            var ref = new Firebase("https://flickering-torch-6953.firebaseio.com");
            $scope.authObj = $firebaseAuth(ref);
            $scope.validatorSettings = {
                hintType: 'label',
                animationDuration: 0,
                rules: [
                    {
                        input: '#passwordInput',
                        message: 'Password is required!',
                        action: 'keyup, blur',
                        rule: 'required'
                                                                        },
                    {
                        input: '#passwordInput',
                        message: 'Password must be between 4 and 12 characters!',
                        action: 'keyup, blur',
                        rule: 'length=4,12'
                    },
                    {
                        input: '#passwordConfirmInput',
                        message: 'Password is required!',
                        action: 'keyup, blur',
                        rule: 'required'
                    },
                    {
                        input: '#passwordConfirmInput',
                        message: 'Passwords doesn\'t match!',
                        action: 'keyup, focus',
                        rule: function (input, commit) {
                            // call commit with false, when you are doing server validation and you want to display a validation error on this field. 
                            if (input.val() === $('#passwordInput').val()) {
                                return true;
                            }
                            return false;
                        }
                    },
                    {
                        input: '#emailInput',
                        message: 'E-mail is required!',
                        action: 'keyup, blur',
                        rule: 'required'
                                                                        },
                    {
                        input: '#emailInput',
                        message: 'Invalid e-mail!',
                        action: 'keyup',
                        rule: 'email'
                    }
                                                                ]
            }
            $scope.validate = function () {
                $scope.validatorSettings.apply('validate');
            }
<strong>            $scope.register = function () {
                $scope.validate();
                register($scope, $firebaseAuth, ref);
            }</strong>
            $scope.logIn = function () {
                $scope.validate();
                logIn($scope, ref);
            };
            $scope.logOut = function () {
                logOut($scope, ref);
            };
        }
        angular.module('authApp').controller('authController', ['$scope', '$firebaseAuth', authController]);
    }())
```
HTML
—-

<!DOCTYPE html>
<html ng-app=”authApp” lang=”en”>

<head>
<!title id=”Description”>jqxInput directive for AngularJS</title>
<link rel=”stylesheet” type=”text/css” href=”/angularjs/jQWidgets/jqwidgets/styles/jqx.base.css” />
<script type=”text/javascript” src=”/angularjs/jQWidgets/scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”/angularjs/jQWidgets/jqwidgets/jqxcore.js”></script>
<script src=”//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js”></script>
<script type=”text/javascript” src=”/angularjs/jQWidgets/jqwidgets/jqxangular.js”></script>
<script type=”text/javascript” src=”/angularjs/jQWidgets/authApp.js”></script>
<script type=”text/javascript” src=”/angularjs/jQWidgets/mainApp.js”></script>
<script type=”text/javascript” src=”/angularjs/jQWidgets/demoApp1.js”></script>
<script src=”https://cdn.firebase.com/js/client/2.2.4/firebase.js”></script>
<script type=”text/javascript” src=”/angularjs/jQWidgets/jqwidgets/globalization/globalize.js”></script>
<script src=”https://cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js”></script>
<style>
#parent {
display: table;
width: 100%;
}

#form_login err {
display: table-cell;
text-align: center;
vertical-align: middle;
}

.register-table {
margin-top: 10px;
margin-bottom: 10px;
}

.register-table td,
.register-table tr {
margin: 0px;
padding: 2px;
border-spacing: 0px;
border-collapse: collapse;
font-family: Verdana;
font-size: 12px;
}

h3 {
display: inline-block;
margin: 0px;
}
</style>
<script>
var authApp = angular.module(“authApp”).factory(‘$exceptionHandler’, function () {
return function (exception, cause) {
exception.message += ‘ (caused by “‘ + cause + ‘”)’;
throw exception;
}
});
</script>
</head>

<body class=’default’>
<div align=”center” id=”parent” style=”overflow: hidden;”>
<form id=”form_login” jqx-validator jqx-settings=”validatorSettings” >
<table class=”register-table”>
<tr>
<td valign=”top”>email ID:</td>
<td valign=”top”>
<jqx-input ng-model=”email” jqx-width=”200″ jqx-height=”25″ id=”emailInput” placeholder=”‘Enter your eMail Id'”> </jqx-input>
</td>
</tr>
<tr>
<td valign=”top”>passWord:</td>
<td valign=”top”>
<jqx-password-input ng-model=”password” jqx-width=”200″ jqx-height=”25″ type=”password” placeholder=”‘Enter your Password'” id=”passwordInput”></jqx-password-input>
</td>
</tr>
<tr>
<td valign=”top”>Confirm password:</td>
<td valign=”top”>
<jqx-password-input jqx-width=”200″ jqx-height=”25″ type=”password” id=”passwordConfirmInput”></jqx-password-input>
</td>
</tr>
<tr>

</tr>
</br>
<table class=”register-table”>
<tr>
<td>
<jqx-toggle-button jqx-settings=”settings” ng-click=”register()”>register</jqx-toggle-button>
</td>
<td>
<jqx-toggle-button jqx-settings=”settings” ng-click=”logIn()”>logIn</jqx-toggle-button>
</td>
<td>
<jqx-toggle-button jqx-settings=”settings” ng-click=”logOut()”>logOut</jqx-toggle-button>
</td>
</tr>
</table>
</table>
</form>
</div>
<div id=”err” ng-if=”error” error !! {{error}}
</div>
<!–div ng-if=”authData” success !! UID : {{ authData.uid }}
</div–>
</body>

</html>
June 17, 2016 at 6:18 am jqxValidator #85201

Keshavan
Participant

Hi,

The problem is that my server code is called irrespective of whether Jqxvalidation fails or not and an unnecessary server call if jqxvalidation fails (as i am unable to check like , if ($scope.validate() {$scope.register()})
Thanks,
Keshavan

June 17, 2016 at 6:41 am jqxValidator #85208

Keshavan
Participant

I have SORTED IT OUT, PLEASE IGNORE POST.

Thanks,
Keshavan
Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.