jQWidgets Forums
jQuery UI Widgets › Forums › Plugins › Validator, Drag & Drop, Sortable › Validation on Condition
Tagged: checkbox, jqxvalidator, Valdition on Condition, validator
This topic contains 3 replies, has 3 voices, and was last updated by Nadezhda 10 years, 2 months ago.
-
AuthorValidation on Condition Posts
-
HI i need to do validation for a text field depending on a condition. How is this possible in JQXValidator.
For e.g. If a check box is checked then only validation should be done for a text field.
$(‘#smtptab’).jqxValidator({
rules : [
{
input : ‘#smtp-server’,
message : ‘Server Name is required.’,
action:’keyup, click, change, blur, focus’,
rule:’required’
},
{
input: ‘#smtp-user’,
message: ‘User Name length should be between 8 and 45 characters(Inclusive).’,
action: ‘keyup, click, change, blur, focus’,
rule: ‘length=8,45’
},
});Here i need to do validation depending on a check box status, how should i do.
Hello yennamvinay,
Here is an example which shows how to validate input field with condition. When checkbox is checked the input field will be validated and when ‘action’ is set to ‘keyup, blur’ this field will be automatically validate on keyup and blur.
<!DOCTYPE html> <html lang="en"> <head> <title></title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <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/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> <style type="text/css"> #smtp-user { 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> <script type="text/javascript"> $(document).ready(function () { $("#smtp-user").jqxInput({ height: 25, width: 200 }); $('#acceptInput').jqxCheckBox({ width: 130 }); $('#testForm').jqxValidator({ rules: [ { input: '#smtp-user', action: 'keyup, blur', message: 'User Name length should be between 8 and 45 characters(Inclusive).', rule: function () { if ($("#acceptInput").val() == true) { var value = $('#smtp-user').jqxInput('val'); var numValue = value.length if (numValue >= 8 && numValue <= 45) { return true; } else return false; }; } }] }); }); </script> </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="smtp-user" class="text-input" /></td> </tr> <tr> <td> <div id="acceptInput" style="margin-left: 50px;" checked="checked">I accept terms</div> </td> </tr> </table> </form> </div> </div> </body> </html>
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/Hello All ,
i want to restrict special characters in Textbox ,pls help me any one
Hello pavan_Jq,
Here is an example which shows how to restrict special symbols in input field.
<!DOCTYPE html> <html lang="en"> <head> <title></title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <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/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 () { $("#userInput").jqxInput({ height: 25, width: 200 }); $('#sendButton').on('click', function () { $('#testForm').jqxValidator('validate'); }); $('#testForm').jqxValidator({ rules: [ { input: '#userInput', action: 'keyup, blur', message: 'Specials symbols are not allowed!', rule: function () { var value = $('#userInput').jqxInput('val'); var pattern = /^[A-Za-z0-9'.-]+$/; if (!pattern.test(value) && value != "") { return false; } } }] }); }); </script> </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 colspan="2" style="text-align: center;"> <input type="button" value="Send" id="sendButton" /></td> </tr> </table> </form> </div> </div> </body> </html>
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.