jQuery UI Widgets Forums Editors CheckBox, RadioButton How to validate JqxRadioButton group

This topic contains 2 replies, has 2 voices, and was last updated by  jarair75 11 years, 5 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • How to validate JqxRadioButton group #22068

    jarair75
    Participant

    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?


    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    jarair75
    Participant

    Dimitar,
    Thank you for your time and response. I appreciate your suggestion. I will surely implement this solution in my project.
    Thank you.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.