jqwidgets-framework

<!DOCTYPE html> <html lang="en"> <head> <meta name="keywords" content="jqxValidator, jQuery Validation, jQWidgets, Default Functionality" /> <meta name="description" content="jqxValidator is a plug-in which enables you to validate html forms. It has a set of built-in rules (required inputs, e-mail, SSN, ZIP, max value, min value, interval etc.) for validating the user input. You can also write a custom rule which will fit best to your requirements." /> <title id='Description'>This demo demonstrates the RTL basic functionality of the jqxValidator plugin.</title> <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxexpander.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxvalidator.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../../jqwidgets/globalization/globalize.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/jqxmaskedinput.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../../../scripts/demos.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#register").jqxExpander({ toggleMode: 'none', width: '320px', showArrow: false }); $('#sendButton').jqxButton({ width: 60, height: 30 }); $('#acceptInput').jqxCheckBox({ rtl: true, width: 130 }); $('#sendButton').on('click', function () { $('#testForm').jqxValidator('validate'); }); $("#ssnInput").jqxMaskedInput({ rtl: true, mask: '###-##-####', width: 250, height: 30 }); $("#phoneInput").jqxMaskedInput({ rtl: true, mask: '(###)###-####', width: 250, height: 30 }); $("#zipInput").jqxMaskedInput({ rtl: true, mask: '#####-####', width: 250, height: 30 }); $('.text-input').jqxInput({ rtl: true, width:250, height:30 }); $('#birthInput').jqxDateTimeInput({ rtl: true, width: 250, height: 30, value: new Date(2019, 4, 1) }); // initialize validator. $('#testForm').jqxValidator({ 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() <= 2025; // 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' }] }); }); </script> <style type="text/css"> .text-input { height: 30px; width: 250px; } .register-table { margin-top: 10px; margin-bottom: 10px; } .register-table td, .register-table tr { margin: 0px; padding: 5px; border-spacing: 0px; border-collapse: collapse; font-family: Verdana; font-size: 12px; } h3 { display: inline-block; margin: 0px; } </style> </head> <body class='default'> <div id="register"> <div><h3>Register</h3></div> <div> <form id="testForm" action="./"> <table class="register-table"> <tr> <td><input placeholder="User name" type="text" id="userInput" class="text-input" /></td> </tr> <tr> <td><input placeholder="password" type="password" id="passwordInput" class="text-input" /></td> </tr> <tr> <td><input placeholder="confirm password" type="password" id="passwordConfirmInput" class="text-input" /></td> </tr> <tr> <td><input placeholder="real name" type="text" id="realNameInput" class="text-input" /></td> </tr> <tr> <td>Birth date:</td> </tr> <tr> <td><div id="birthInput"></div></td> </tr> <tr> <td><input placeholder="email" type="text" id="emailInput" placeholder="someone@mail.com" class="text-input" /></td> </tr> <tr> <td>SSN:</td> </tr> <tr> <td><div id="ssnInput"></div></td> </tr> <tr> <td>Phone:</td> </tr> <tr> <td><div id="phoneInput"></div></td> </tr> <tr> <td>Zip code:</td> </tr> <tr> <td><div id="zipInput"></div></td> </tr> <tr> <td colspan="2" style="padding: 5px;"><div id="acceptInput" style="margin-left: 50px;">I accept terms</div></td> </tr> <tr> <td colspan="2" style="text-align: center;"><input type="button" value="Send" id="sendButton" /></td> </tr> </table> </form> </div> </div> <div style="position: absolute; bottom: 5px; right: 5px;"> <a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a> </div> </body> </html>