jQWidgets Forums

Tagged: check box, checkbox, group, jqxvalidator, rule, validate, validator

This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 11 years, 4 months ago.

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

Author

How to validate a group of checkboxes with jqxvalidator? Posts

October 25, 2013 at 10:35 am How to validate a group of checkboxes with jqxvalidator? #31325

Alina

Member

Can i validate a group of checkboxes with jqxvalidator? If i have a group of five checkbox in a group and at least one to be checked on submit, how can i do this?

October 25, 2013 at 11:34 am How to validate a group of checkboxes with jqxvalidator? #31328

Dimitar

Participant

Hello Alina,

Here is an example:

<!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.10.2.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/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="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            $("#checkbox1").jqxCheckBox({ width: 250, height: 25, theme: theme });
            $("#checkbox2").jqxCheckBox({ width: 250, height: 25, theme: theme });
            $("#checkbox3").jqxCheckBox({ width: 250, height: 25, theme: theme });
            $('#form').jqxValidator({
                rules: [
                { input: '#checkbox1', message: 'Select at least one option', action: 'change', rule: function () {
                    var checked1 = $("#checkbox1").jqxCheckBox("checked");
                    var checked2 = $("#checkbox2").jqxCheckBox("checked");
                    var checked3 = $("#checkbox3").jqxCheckBox("checked");
                    return (checked1 || checked2 || checked3);
                }, position: 'right: 0,0'
                }], theme: theme
            });
            $("#validate").click(function () {
                var checkbox1 = $("#checkbox1");
                $('#form').jqxValidator('validate', checkbox1);
            });
            $('#form').on('validationSuccess', function (event) {
                alert("Validated successfully. Submitting...");
            });
        });
    </script>
</head>
<body class='default'>
    <form id="form" action="">
    <div style='margin-top: 10px;' id='checkbox1'>
        <span>First option</span></div>
    <div style='margin-top: 10px;' id='checkbox2'>
        <span>Second option</span></div>
    <div style='margin-top: 10px;' id='checkbox3'>
        <span>Third option</span></div>
    </form>
    <button id="validate">
        Validate</button>
</body>
</html>

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.