jQuery UI Widgets › Forums › Plugins › Validator, Drag & Drop, Sortable › Validator hint position
Tagged: jqxvalidator, offset, validator
This topic contains 7 replies, has 4 voices, and was last updated by Peter Stoev 10 years, 2 months ago.
-
AuthorValidator hint position Posts
-
Hi,
I have image element next to input element. I validate input, but hint covers image. How can I get that hint shows next to image.
Thank you for your help.
Hello damc,
You can add an offset to the validator by changing the _margin property, as shown in the following example (based on the demo):
<!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.7.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.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/jqxexpander.js"></script> <script type="text/javascript" src="../../jqwidgets/globalization/jquery.global.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="../../scripts/gettheme.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = getTheme(); $('#sendButton').jqxButton({ width: 60, height: 25, theme: theme }); $('#acceptInput').jqxCheckBox({ width: 130, theme: theme }); $('#sendButton').bind('click', function () { $('#testForm').jqxValidator('validate'); }); $("#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').addClass('jqx-input'); $('.text-input').addClass('jqx-rc-all'); if (theme.length > 0) { $('.text-input').addClass('jqx-input-' + theme); $('.text-input').addClass('jqx-widget-content-' + theme); $('.text-input').addClass('jqx-rc-all-' + theme); } var date = new Date(); date.setFullYear(2000, 0, 1); $('#birthInput').jqxDateTimeInput({ theme: theme, height: 22, value: $.jqx._jqxDateTimeInput.getDateTime(date) }); $("#register").jqxExpander({ width: '300px', theme: theme, showArrow: false, toggleMode: 'none' }); // initialize validator. $('#testForm').jqxValidator({ // the _margin property offsets the validator _margin: 30, 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', rule: 'length=3,12' }, { 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 () { var date = $('#birthInput').jqxDateTimeInput('value'); var result = date.dateTime.getFullYear() >= 1900 && date.dateTime.getFullYear() <= 2012; return result; } }, { input: '#passwordInput', message: 'Password is required!', action: 'keyup', rule: 'required' }, { input: '#passwordInput', message: 'Your password must be between 4 and 12 characters!', action: 'keyup', rule: 'length=4,12' }, { input: '#passwordConfirmInput', message: 'Password is required!', action: 'keyup', rule: 'required' }, { input: '#passwordConfirmInput', message: 'Passwords doesn\'t match!', action: 'keyup, focus', rule: function (input) { if (input.val() === $('#passwordInput').val()) { return true; } return false; } }, { input: '#emailInput', message: 'E-mail is required!', action: 'keyup', 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 }); }); </script> <style type="text/css"> .text-input { height: 21px; width: 150px; } .register-table { margin-top: 10px; margin-bottom: 10px; } .register-table td, 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'> <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" 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 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>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hello Dimitar,
I set the margin property and it works.
I have another problem:
I have multiple elements (rules) on page which I validate. Can I set the _margin property for only two elements – rules (this two elements have element image) and other have default margin.Thank you.
Hi damc,
Unfortunately, this cannot be done, the _margin property is set for the whole widget, not for individual rules.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
Is it possible to have multiple validators widgets on page (form)? I will use one validator widget with margin property for these two fields with image element and another validator widget withouth margin property for other fields.
Thank you.
Hi damc,
It is not possible to create two jqxValidator widgets attached to the same form, because the form’s id is required on initialization of the widget.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/I am having a horrible time figuring out my problem and this is close to my issue so I will ask here.
I have a dialog that is created but not shown until needed. The validaor hints show up in the wrong place. The dialog with the widget shows up in the center of the screen but the hints show up in the upper left hand corner.
Any idea?
Thanks,
WildWill
With Dialog, you’d better use this mode: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxvalidator/validation-label.htm?arctic
-
AuthorPosts
You must be logged in to reply to this topic.