jQuery UI Widgets › Forums › Editors › CheckBox, RadioButton › How to validate JqxRadioButton group
Tagged: group, jqxRadioButton, jqxvalidator, radio button, validate, validator
This topic contains 2 replies, has 2 voices, and was last updated by jarair75 11 years, 5 months ago.
-
Author
-
I have a group of 4 jqxRadioButtons. I want to make the group a required field. In other words, a radio buttom must be selected. How can I use the jqxValidator to do this validation.
example:
$(“#radioMode1″).jqxRadioButton({groupName:”1”, theme: theme });
$(“#radioMode2″).jqxRadioButton({groupName:”1”, theme: theme });
$(“#radioMode3″).jqxRadioButton({groupName:”1”, theme: theme });
$(“#radioMode4″).jqxRadioButton({groupName:”1″, theme: theme });Now how can I use the jqxvalidator to make groupName:”1” a required field?
Hello jarair75,
Here is the solution:
<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.9.1.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/jqxradiobutton.js"></script> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = getDemoTheme(); $("#jqxRadioButton").jqxRadioButton({ groupName: "1", width: 250, height: 25, theme: theme }); $("#jqxRadioButton2").jqxRadioButton({ groupName: "1", width: 250, height: 25, theme: theme }); $("#jqxRadioButton3").jqxRadioButton({ groupName: "1", width: 250, height: 25, theme: theme }); $("#jqxRadioButton4").jqxRadioButton({ groupName: "1", width: 250, height: 25, theme: theme }); $('#form').jqxValidator({ rules: [{ input: '#jqxRadioButton', message: 'Select an option', action: 'change', rule: function () { var checked = $("#jqxRadioButton").jqxRadioButton("checked") || $("#jqxRadioButton2").jqxRadioButton("checked") || $("#jqxRadioButton3").jqxRadioButton("checked") || $("#jqxRadioButton4").jqxRadioButton("checked"); return checked; }, position: 'right:0,0' }], theme: theme }); $("#validate").click(function () { var form = $("#form"); $('#form').jqxValidator('validate', form); }); }); </script></head><body class='default'> <form id="form" action=""> <div style='margin-top: 10px;' id='jqxRadioButton'> 12 Months Contract</div> <div style='margin-top: 10px;' id='jqxRadioButton2'> <span>6 Months Contract</span></div> <div style='margin-top: 10px;' id='jqxRadioButton3'> <span>3 Months Contract</span></div> <div style='margin-top: 10px;' id='jqxRadioButton4'> <span>1 Month Contract</span></div> </form> <button id="validate"> Validate</button></body></html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Dimitar,
Thank you for your time and response. I appreciate your suggestion. I will surely implement this solution in my project.
Thank you. -
AuthorPosts
You must be logged in to reply to this topic.