jQWidgets Forums
jQuery UI Widgets › Forums › Plugins › Validator, Drag & Drop, Sortable › jqxvalidator in jqxWindow
Tagged: validator
This topic contains 3 replies, has 4 voices, and was last updated by bhavesh.khatri 11 years, 4 months ago.
Viewing 4 posts - 1 through 4 (of 4 total)
-
Author
-
Hi jqwidget team.
I use jqxvalidator to validate data which is on jqxWindow and set hintType as tooltip.
I found that when tooltip appears it is displayed out of jqxWindow dialog area. then I scroll up-down, all tooltip still be at the same point.I need all tooltip move follow by its validator as when I move dialog and displayed just in its jqxWindow.
Here is my simple code. please advise, thank you.
<!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 basic functionality of the jqxValidator plugin.</title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.8.3.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/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/jqxwindow.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/gettheme.js"></script> <!-- <script type="text/javascript" src="../../scripts/jquery.ui.core.css"></script> <script type="text/javascript" src="../../scripts/jquery.ui.all.css"></script> --> <script type="text/javascript" src="../../scripts/jquery-ui-1.9.2.js"></script> <script type="text/javascript"> $(document).ready(function () { var ddl_test = [ { prefix_id: "a", prefix_name: "เด็กชาย" }, { prefix_id: "b", prefix_name: "เด็กหญิง" }, { prefix_id: "c", prefix_name: "นาย" }, { prefix_id: "d", prefix_name: "นาง" }, { prefix_id: "e", prefix_name: "นางสาว" } ]; var theme = getDemoTheme() $("#register").jqxWindow({ width: '300px', height:'300', theme: theme,resizable:false, autoOpen:false }); $('#sendButton').jqxButton({ width: 60, height: 25, theme: theme }); $('#acceptInput').jqxCheckBox({ width: 130, theme: theme }); $('#sendButton').on('click', function () { //var result = $('#testForm').jqxValidator('validate'); var onSuccess = $('#testForm').jqxValidator('validate'); //alert(onSuccess); }); $("#ssnInput").jqxMaskedInput({ mask: '###-##-####', width: 150, height: 22, theme: theme }); $("#phoneInput").jqxMaskedInput({ mask: '(###)###-####', width: 150, height: 22, theme: theme }); $("#zipInput").jqxMaskedInput({ mask: '###-##-####', width: 150, height: 22, theme: theme }); $('.text-input').jqxInput({ theme: theme }); var date = new Date(); date.setFullYear(2000, 0, 1); $('#birthInput').jqxDateTimeInput({ theme: theme, height: 22, value: $.jqx._jqxDateTimeInput.getDateTime(date) }); $("#testddl").jqxDropDownList({ checkboxes: false, source: ddl_test, displayMember: "prefix_name", valueMember: "prefix_id", width: 200, height: 25, theme: theme }); // initialize validator. $('#testForm').jqxValidator({ scroll: false, rules: [ { input: '#testddl', message: 'test', action: 'keyup, blur, change', rule: function (input, commit) { //var data = $('#test_ddl').jqxDropDownList('getSelectedItem'); //alert(input); if (input.val() != "") { return true; } else { return false; } } }, { input: '#userInput', message: '*', action: 'keyup, blur', rule: 'required' }, { input: '#userInput', message: 'Your username must be between 3 and 12 characters!', action: 'keyup, blur', rule: 'length=3,10' }, { 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/2012.', action: 'valuechanged', rule: function (input, commit) { var date = $('#birthInput').jqxDateTimeInput('value'); var result = date.getFullYear() >= 1900 && date.getFullYear() <= 2012; // 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'}], theme: theme }); $("#showdialog").jqxButton({ width: 90, height: 24 }).click(function () { $('#register').jqxWindow('open'); }); }); </script> <style type="text/css"> .text-input { height: 21px; width: 150px; } .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 class='default'> <input type="button" id="showdialog" value="showdialog" /> <div id="register"> <div><h3>Register</h3></div> <div> <form id="testForm" action="./"> <table class="register-table"> <tr> <td>Username:</td> <td><input type="text" id="userInput" class="text-input" /></td> </tr> <tr> <td>Password:</td> <td><input type="password" id="passwordInput" class="text-input" /></td> </tr> <tr> <td>Confirm password:</td> <td><input type="password" id="passwordConfirmInput" class="text-input" /></td> </tr> <tr> <td>Real name:</td> <td><input type="text" id="realNameInput" class="text-input" /></td> </tr> <tr> <td>Birth date:</td> <td><div id="birthInput"></div></td> </tr> <tr> <td>E-mail:</td> <td><input type="text" id="emailInput" placeholder="someone@mail.com" class="text-input" /></td> </tr> <tr> <td>SSN:</td> <td><div id="ssnInput"></div></td> </tr> <tr> <td>Phone:</td> <td><div id="phoneInput"></div></td> </tr> <tr> <td>Zip code:</td> <td><div id="zipInput"></div></td> </tr> <tr> <td>Test DDL:</td> <td><div id="testddl"></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></body></html>
Hi,
The tooltips are moved when the Dialog is moved. However, if you scroll up/down the Form, their position will not be updated. If you want to have a Form with scrolling, better use the Validator with Labels as a hint type.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comCan you give an example of this? I don’t follow…
Hi All,
I was able to find out the work around on above problem. You can update the position on onscroll event just like below.
$( "#register" ).scroll(function() { $('#testForm').jqxValidator('updatePosition'); });Best Regards,
Bhavesh -
AuthorPosts
Viewing 4 posts - 1 through 4 (of 4 total)
You must be logged in to reply to this topic.