jQuery UI Widgets Forums Plugins AngularJS jqxValidator validationSuccess

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 9 years ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • jqxValidator validationSuccess #72542

    gonley
    Participant

    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?

    jqxValidator validationSuccess #72577

    Dimitar
    Participant

    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>
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.