To use of custom rules in jQuery Validation Engine?

Question

I use jQuery Validation Engine for my form validation here is link for demo : https://github.com/posabsolute/jQuery-Validation-Engine

I have one checkbox and four textboxes in ASP.NET, I want to validate that if the checkbox is selected then the four textboxes must be filled or it would show an error message that "please fill the boxes."

This is so far I have tried, but didn't work. Any help would be appreciated.

  <script type="text/javascript">
                function checkBox() {
                    var check = document.getElementById("CheckBox1");
                    var tb1 = document.getelementbyid('iBox1');
                    var tb2 = document.getelementbyid('iBox2');
                    var tb3 = document.getelementbyid('iBox3');
                    var tb4 = document.getelementbyid('iBox4');
         if (check.checked && tb1 == null && tb2 == null && tb3 == null && tb4 == null) {
                        alert("checkbox checked");
                        jQuery("#form1").validationEngine({
                            'custom_error_messages': {
                                '#iBox1': {
                                    'required': {
                                        'message': "write at least four characters in Name"
                                    }
                                }
                            }
                        });
                    }
                    else {
                        alert("unchecked");
                    }
                }
                $(document).ready(function () {
                    $("#form1").validationEngine();
                });
        </script>
        <form runat="server" id="form1">
        <div>
       <asp:CheckBox runat="server" ID="CheckBox1" onclick="checkBox()"></asp:CheckBox>
        <asp:TextBox runat="server" ID="iBox1"  MaxLength="1" size="1">/asp:TextBox>
        <asp:TextBox runat="server" ID="iBox2" MaxLength="1" size="1"></asp:TextBox>
        <asp:TextBox runat="server" ID="iBox3" MaxLength="1" size="1"></asp:TextBox>
        <asp:TextBox runat="server" ID="iBox4" MaxLength="1" size="1"></asp:TextBox>
        </div>
    </form>

Answer 1

Looks like your problem is with the fact that asp.net control IDs are generated on the client side, so you cannot really reference them as is in your script. They are available though via ClientID, and since your script appears to be defined on the aspx page and not in a separate js file, the easiest thing for you to do is this:

var check = document.getElementById('<%= CheckBox1.ClientID %>');

Likewise for the textboxes.