jQuery UI Widgets › Forums › Plugins › AngularJS › jqxValidator validationSuccess
Tagged: Angular, Angular validator, event, form, jqxvalidator, scope, validate, validationSuccess
This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 9 years, 4 months ago.
Viewing 2 posts - 1 through 2 (of 2 total)
-
Author
-
I have create a button to validate the form using $scope.formSettings to validate my input. But after validate, I want to make use of the validationSuccess event to submit my form data to the server, what is the event function for validationSuccess?
Hello gonley,
Here is an example, showing how to bind to the validationSuccess event in an Angular environment:
<!DOCTYPE html> <html ng-app="demoApp"> <head> <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" /> <script type="text/javascript" src="../../scripts/angular.min.js"></script> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxpasswordinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxvalidator.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmaskedinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script> <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript"> var demoApp = angular.module("demoApp", ["jqwidgets"]).factory('$exceptionHandler', function () { return function (exception, cause) { exception.message += ' (caused by "' + cause + '")'; throw exception; } }); demoApp.controller("demoController", function ($scope) { $scope.validatorSettings = { hintType: 'label', animationDuration: 0, rules: [ { input: '#userInput', message: 'Username is required!', action: 'keyup, blur', rule: 'required' }, { input: '#userInput', message: 'Your username must be between 3 and 12 characters!', action: 'keyup, blur', rule: 'length=3,12' }, { input: '#realNameInput', message: 'Real Name is required!', action: 'keyup, blur', rule: 'required' }, { input: '#realNameInput', message: 'Your real name must contain only letters!', action: 'keyup', rule: 'notNumber' }, { input: '#realNameInput', message: 'Your real name must be between 3 and 12 characters!', action: 'keyup', rule: 'length=3,12' }, { input: '#birthInput', message: 'Your birth date must be between 1/1/1900 and 1/1/2014.', action: 'valueChanged', rule: function (input, commit) { var date = $('#birthInput').jqxDateTimeInput('value'); var result = date.getFullYear() >= 1900 && date.getFullYear() <= 2014; // call commit with false, when you are doing server validation and you want to display a validation error on this field. return result; } }, { input: '#passwordInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' }, { input: '#passwordInput', message: 'Your 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' }, { input: '#ssnInput', message: 'Invalid SSN!', action: 'valueChanged, blur', rule: 'ssn' }, { input: '#phoneInput', message: 'Invalid phone number!', action: 'valueChanged, blur', rule: 'phone' }, { input: '#zipInput', message: 'Invalid zip code!', action: 'valueChanged, blur', rule: 'zipCode' }, { input: '#acceptInput', message: 'You have to accept the terms', action: 'change', rule: 'required', position: 'right:0,0'}] } // validate $scope.validate = function () { $scope.validatorSettings.apply('validate'); } $scope.validationSuccess = function () { alert('Successful validation.'); } }); </script> <style type="text/css"> .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> </head> <body> <div ng-controller="demoController"> <div> <h3> Register</h3> </div> <div style="overflow: hidden;"> <form jqx-validator jqx-settings="validatorSettings" id="testForm" jqx-on-validation-success="validationSuccess()"> <table class="register-table"> <tr> <td valign="top"> Username: </td> <td valign="top"> <jqx-input jqx-width="200" jqx-height="25" id="userInput"></jqx-input> </td> </tr> <tr> <td valign="top"> Password: </td> <td valign="top"> <jqx-password-input jqx-width="200" jqx-height="25" type="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> <td valign="top"> Real name: </td> <td valign="top"> <jqx-input jqx-width="200" jqx-height="25" id="realNameInput"></jqx-input> </td> </tr> <tr> <td valign="top"> Birth date: </td> <td valign="top"> <jqx-date-time-input jqx-width="200" jqx-height="25" id="birthInput"></jqx-date-time-input> </td> </tr> <tr> <td valign="top"> E-mail: </td> <td valign="top"> <jqx-input jqx-width="200" jqx-height="25" id="emailInput" placeholder="someone@mail.com"></jqx-input> </td> </tr> <tr> <td valign="top"> SSN: </td> <td valign="top"> <jqx-masked-input jqx-width="200" jqx-height="25" jqx-mask="'###-##-####'" id="ssnInput"></jqx-masked-input> </td> </tr> <tr> <td valign="top"> Phone: </td> <td valign="top"> <jqx-masked-input jqx-width="200" jqx-height="25" jqx-mask="'(###)###-####'" id="phoneInput"></jqx-masked-input> </td> </tr> <tr> <td valign="top"> Zip code: </td> <td valign="top"> <jqx-masked-input jqx-width="200" jqx-height="25" jqx-mask="'###-##-####'" id="zipInput"></jqx-masked-input> </td> </tr> <tr> <td valign="top" colspan="2" style="padding: 5px;"> <jqx-check-box id="acceptInput" style="margin-left: 100px;">I accept terms</jqx-check-box> </td> </tr> <tr> <td colspan="2" style="text-align: center;"> <jqx-button ng-click="validate()">Send</jqx-button> </td> </tr> </table> </form> </div> </div> </body> </html>
-
AuthorPosts
Viewing 2 posts - 1 through 2 (of 2 total)
You must be logged in to reply to this topic.